博客

js可以操作元素的表现元表现样式 ，但是并不是能直接操作样式表，而是改变元素的属性从而做到改变样式

js操作元素样式：

通过style属性

元素对象名.style.样式名=“样式值”//添加或者修改

元素对象名.style.样式名=””//删除样式

注意:

以上操作，操作的是HTML的style属性声明中的行类样式样式。而不是其他css代码域中的样式。

我们先在页面上创建一个绿色的div

  div {
            width: 100px;
            height: 100px;
            background-color: green;
        }

<div></div>

获取该div元素 把宽度和背景颜色改变

改变元素的样式

 var div = document.getElementsByTagName("div")[0];
        div.style.width = "200px";
          div.style.backgroundColor = "red";

注意css中 background-color在js中换成了小驼峰的写法

上面可以看出改变的是元素的属性没有操作css样式表



发生改变的原因是因为其属性都是行内样式.优先级比外部样式和内部样式的优先级要高

删除属性 。通过这个方法删除的只是行类属性不能改变css样式表中的值

div.style.backgroundColor = "";
        div.style.width = "";
        div.style.height = "";

通过className

元素对象名.className=“新的值”//添加类选择器样式或者修改类选择器样式

元素对象名.className=””//删除类样式。

该方法是通过对class属性的增加或者删除来改变样式

div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box {
            background-color: red;
        }
        .border {
            border: 1px solid royalblue;
        }
        .width {
            width: 150px;
        }

 <div>
   </div>

给元素添加一个 box的class名

    var div = document.getElementsByTagName("div")[0];
       div.className = "box";

删除所有的class名

div.className = "";

因为div.className 的值为字符串所有可以这样操作

div.className = “类名1 类名2”；

一次赋值多个class名中间用空格隔开

通过classlist对class属性的操作

length 长度

item（）（也可以用方括号语法）：取得每个元素

add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。

contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

remove（）：从列表中删除给定的字符串。

toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

//添加" border "类
div. classList.add("border" );

//删除"border"类
div. classList.remove("border");

//切换"width"类 当class中有这个类名的时候执行删除 否则添加
div.classList.toggle("width");

以上代码能够确保其他类名不受此次修改的影响

//确定元素中是否包含既定的类名
div. classList. contains("width")
//迭代类名
for (var i=0, len=div. classList.length; i < len; i++){
console.log(div. classList[i]);
}