chaihongjun.me

通过原生JavaScript修改CSS的方法总结

通过原生JavaScript修改CSS的方法总结

1.通过ELEMENT类型的DOM节点方法

//name 是特性名称, value是特性对应的值
elemet.setAttribute(name,value)
elemet.getAttribute(name)
elemet.removeAttribute(name)

以上三个方法用来对Node节点分别设置节点特性值,获取节点某个特性的值,以及删除节点某个特性之用,用到CSS的方面:

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.setAttribute("style","color:red;font-size:16px;");

即:

element.setAttribute("style",cssRules);  //cssRules是具体的CSS规则

当然,这样的方式有两个方面需要注意

  1. 只是针对元素的行内样式有影响,对层叠样式文件无影响。

  2. 每一次这样的修改设置,都会清空之前行内样式的规则

比如:

element=document.getElementById("#id");  //假设这里获取一个元素,并且没有行内样式
element.setAttribute("style","color:red;");  //这个时候这个元素内的文本颜色为红色 
element.setAttribute("style","font-size:20px;");  //这个时候文本颜色不再是红色的,恢复到原先默认的颜色,但是字体变成了20px

这里影响是某个元素的整个行内样式


2. 通过ELEMENT类型的DOM节点style属性(这个是浏览器允许的而非DOM规则)

我们常见的代码:

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style="color:red;font-size:20px;"  //不应该这样做

这里元素的style属性属于一个ELEM对象,CSSStyleDeclaration对象是CSS属性和值的一个键值对的集合。

而且style属性也是用来表示元素的内联style特性的,同样忽略了样式表。CSSStyleDeclaration本身只是只读的,所以不能用来设置修改样式的属性值。

但是,现实情况是现代浏览器都允许修改。

当然因为现代浏览器允许修改,所以直接这样也可以(只影响行内样式):

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style="color:red;font-size:20px;"   //当然这里需要写完整的CSSRule

这里影响是某个元素的整个行内样式


3.  通过ELEMENT类型的DOM节点的style属性的cssText方法(这个是DOM提供的)

前面提到了元素的style属性实际是一个CSS属性键值对集合,按照规则只能读取不能修改。

所以想修改,应该使用style属性的属性cssText(这里是整条规则,同样只影响行内样式):

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.cssText="color:red;font-size:20px;"   //当然这里需要写完整的CSSRule

这里影响是某个元素的整个行内样式

---------------------------------------------------以下方法不会一次性影响某个元素的整个行内样式

4. 依然是通过ELEMENT类型的DOM节点的style属性

元素的style属性可以访问CSS属性列表,所以可以直接修改在CSS属性列表内的CSS属性:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

直接修改CSS属性:

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.color="red";   // 修改了字体颜色
element.style.fontSize="20px";   //修改了字体大小,与之前不同属性不受影响依然保留

这里要注意CSS属性列表里面CSS属性和DOM属性(通常是来JS控制)的对应关系,font-size是CSS的属性,对应到DOM的属性是fontSize,例子中style是DOM节点的属性,所以访问的是DOM的CSS属性

这里发现,这种方法与之前相同的都是仅仅针对元素的行内样式起作用。而不同的是,前面3种方法的修改或编辑维护工作必须“一步到位”,如果不能一次配置完,可能结果不是所预料的,而这个第4种方法可以分开设置不受影响。


5. ELEMENT元素style属性的方法

前面还是提到元素的style属性是一个对象,一个CSS属性和值的键值对的集合,这个对象叫CSSStyleDeclaration,这个对象有几个方法:

//propertyName 是CSS属性名 , propertyValue是CSS属性值
element.style.setProperty(propertyName,propertyValue)
element.style.getProperty(propertyName)
element.style.removeProperty(propertyName)

那么通过这3个方法,可以很方便的编辑维护CSS属性:

element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.setProperty("color","red");  //字体设置红色
element.style.setProperty("font-size","20px");  //字号20px

这个方法和第四个方法其实是一样的,只影响行内样式,而且不需要“一步到位”。


6.前面的方法都是对元素的行内样式有影响,而不影响外部的样式表,这个方法是直接添加已有的样式表(内置或外置)

//动态创建内置样式表
var style = document.createElement('style');             
    style.innerHTML = '#id{color:red;font-size:20px;}#';
    document.head.appendChild(style);

//动态添加外置样式表    
var  link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
     link.setAttribute('href', 'index.css');  //已经存在这个index.css文件
     document.head.appendChild(link);

以上的方法都是针对元素的行内样式做的修改维护,没有涉及到文档的外置或者内置样式表内的属性值做修改。后续将会单独针对样式表做介绍。


参考:

1. http://www.cnblogs.com/susufufu/p/5749922.html

2. https://shadeofgod.github.io/2016-10-26/通过javascript修改css样式的方式/

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»