JS之ClassName属性使⽤
⼀、style与className属性的对⽐
在前⾯的style属性学习中，知道了通过style属性可以控制元素的样式，从⽽实现了⾏为层通过DOM的style属性去⼲预变现层显⽰的⽬地，但是这种就是不好的,⽽且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数，去寻对应修改和设置样式的有关语句。⽽且每添加或修改js脚本的代码量远⼤于我们修改css样式的代码量。
所以与其使⽤DOM直接改变某个元素的样式，不如通过JavaScript代码去更新这个元素的class属性。
下⾯通过代码来⽐较这两种⽅式的差别:
function setStyleHeaderSiblings() {
if (!checkCompatibility()) return; //check compatibility
var heads = ElementsByTagName("h1");
var ele;  //defines a element for receive;
for (var i = 0; i < heads.length; i++) {
ele = getNextElement(heads[i].nextSibling);
ele.style.fontWeight = "bold";
ele.style.fontSize = "1.2em";
}fontweight属性bold
}
function setStyleHeaderSiblings() {
if (!checkCompatibility()) return; //check compatibility
var heads = ElementsByTagName("h1");
var ele;  //defines a element for receive;
for (var i = 0; i < heads.length; i++) {
ele = getNextElement(heads[i].nextSibling);
ele.className="change";
}
css样式表
.change{
font-weight:bold;
font-size:1.2em;
}
假设我们这个需要给这个效果加上⼀个
上⾯这种做法需要在js⾥⾯加如下代码:
ele.style.backgroundColor="blue";
⽽第⼆种做法则只要在样式表⾥加⼀个样式就可以实现,⽽且实现了样式与⾏为的分离，还减少了我们的代码量，所以在后期需求不确定的情况下，我建议第⼆种⽅法来动态的修改元素的样式。
⼆、追加class类名
但是通过className设置元素的样式也有⼀个缺陷，那就是通过className设置元素的class属性时将替换(⽽不是追加)该元素原有的class 属性，在实际开发中往往很多时候我们需要追加class；
所以根据这个需要我们可以⾃定义⼀个⽅法来实现追加className的效果代码如下:
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName += " "; //这句代码追加的类名分开        newClassName += value;
element.className = newClassName;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。