原生js获取、添加、修改_非行间css样式

时间: 2018-04-17阅读: 1224标签: 样式

html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。


html如下:

<style>
#box{ width:300px; height:100px; background:#ff0; border:1px solid #0076FF;}
</style>
<div id="box"></div>


我们如何通过js获取box节点的高和border值呢?定义一个getStyle的方法,代码如下:

<script type="text/JavaScript">
//获取非行间css样式
function getStyle(obj,attr){    //获取非行间样式,obj是对象,attr是值
    if(obj.currentStyle){   //针对ie获取非行间样式
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];   //针对非ie
    };
};
//使用
var b=document.getElementById('box');
console.log(getStyle(b,"height"));//获取元素的高100px
console.log(getStyle(b,"border"));//获取元素的boder显示为:1px solid rgb(0, 118, 255)
</script>


这里的getStyle只能获取,如果需要添加或者修改非行间css样式呢,这里定义一个方法,代码如下:

<script type="text/JavaScript">
//为获取/添加css样式
function css(obj,attr,value){   //对象,样式,值。传2个参数的时候为获取样式,3个是设置样式
    if(arguments.length == 2){  //arguments参数数组,当参数数组长度为2时表示获取css样式
        return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数
    }else{
        if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值
            obj.style[attr] = value;
        };
    };
};
//使用
var b=document.getElementById('box');
css(b,"background","#f0f");//把box的背景替换为#f0f
console.log(css(b,"border"));//获取元素的boder显示为:1px solid rgb(0, 118, 255)
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/657

关闭

使用<label>标签修改input[type=checkbox]的样式

因为<label>的特性有两点 : 不呈现任何效果;用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.所以正适合用于修改input的样式,进入正文, 修改input[type=checkbox]的样式

vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

简写的 border-radius 100% 和 50% 是等效的

border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况。比如实现一个圆形按钮,其中 border-radius 数值有些人写为 50%,有些人则写成 100%

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种:直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别)

使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size,会发现这个命令只支持(1-7)这几种字体大小值

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

JavaScript自定义getStyle方法获取元素样式

由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题

Vue之样式绑定

在前端开发中,设置元素的 class 列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。

css对大小写敏感吗?

css指的是层叠样式表(Cascading Style Sheets),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式语言。

为什么要初始化css样式?

为什么要初始化css样式1.浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量;如果不初始化,整个页面做完会很糟糕,重复的css样式很多

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!