JavaScript|DOM操作CSS JavaScript|js

【JavaScript|DOM操作CSS】
文章目录

修改样式
读取样式

修改样式

通过JS修改元素的样式:
语法:元素.style.样式名=样式值
==注意:==如果CSS的样式名中含有-，比如background-color，这种名称在JS中是不合法的。
使用方法：去掉-，然后将-后的字母大写（即驼峰命名法），如:backgroundColor
我们通过style属性设置的样式都是内联样式,
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

读取样式

语法:`元素.style.样式名

通过style属性设置和读取的都是内联样式，即style"样式"中的样式，无法读取样式表（即标签中）中的样式：

Document - 锐客网 > #box1{ width: 200px; height: 200px; background-color: plum; } > window.onload = function(){ var box1 = document.getElementById("box1"); var btn1 = document.getElementById("btn1"); btn1.onclick = function(){ box1.style.width = "300px"; box1.style.backgroundColor = "yellow"; }var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ // 带符号 alert(box1.style.width); }}

文章图片

正是由于这种属性，直接点击第二个按钮是不能直接读取样式的，只有点击按钮1生成如下样式之后，再点击按钮2才能有样式输出。

文章图片

获取元素当前显示的样式
语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式，不过样式是内联的还是样式表中的。
如果没有改样式则返回默认值。
但是这个属性只有在IE中才有效
getComputedstyle()这个方法来获取元素当前的样式
语法：getComputedstyle(要获取样式的元素，可以传递一个伪元素（一般都传NULL）)
他是window的方法，可以直接使用。
该方法会返回一个对象,对象中封装了当前元素对应的样式,
通过 . 再获取样式。
如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如:没有设置width,它不会获取到auto，而是一个长度。

var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ var obj = getComputedStyle(box1,null); alert(obj.width); }

自己写函数获取样式
根据不同的版本，调用不同的函数。

/* obj:要获取样式的元素 name：要获取的样式名 */function getStyle(obj,name){ // 这里要写window.getComputedStyle，而不能写getComputedStyle； //因为只写getComputedStyle相当于写了一个变量。变量找不到,会报错；window.getComputedStyle相当于属性，属性找不到，返回undefine if(window.getComputedStyle){ // 正常浏览器 return getComputedStyle(obj,null)[name]; //IE8 }else{ return obj.currentStrly[name]; } //简写： // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStrly[name]; }

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性