首页 > 代码库 > CSS-DOM的小知识(一)
CSS-DOM的小知识(一)
在DOM编程艺术中,CSS-DOM应用很广泛。
1.style属性
通过element.style.property可以获得元素的样式,但是style属性只能够返回内嵌样式,对于外部样式表的样式和head中的style样式都无法获取,这就限制了此方法的使用。
输出:
若更改样式,则如下:
输出:
但是实际中,可以使用style方法设置样式,这种方法的用处还是很大。
element.style.property = value;
输出:
2.className属性
这种属性之前一直忽略了,最近发现其实非常好用。这也是今天写这篇文章的主要原因。
我们设置一个属性的类的时候,可以使用:elem.setAttribute(‘class‘,value),比如之前的例子:para.setAttribute("class","info"),这表示设置p元素class的属性值为info。
但更简单的范式是更新className属性。className属性是一个可读/可写的属性。凡是元素节点都有这个属性。
获得一个元素的class属性:
element.className;
设置一个元素的class属性:
element.className = value;
唯一的不足就是通过className属性设置某个元素的class属性是将替换(而不是)追加该元素原有的class设置。
实际中可以采用拼接操作,把新的class设置追加到className属性上去:elem.className += " info";(此处info前面注意空格)
我们在实际中,也经常调用addClass函数,这个函数可以追加新的class到目标元素上面。
function addClass(element, value){
if(!lelement.className ) {element.className = value;}else {
newclassName = element.className;
newclassName + = ‘ ’;(注意空格)
newclassName + =value;
element.className = newclassName;
}
CSS-DOM的小知识(一)