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规则
当然,这样的方式有两个方面需要注意
只是针对元素的行内样式有影响,对层叠样式文件无影响。
每一次这样的修改设置,都会清空之前行内样式的规则
比如:
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样式的方式/