HTML:三种方法用JavaScript修改CSS样式
修改元素的css样式一般是标签的style属性中或头部的style标签中进行增删与修改。
下为利用JS修改元素的css样式的三种较为实用的方式。
第一种:获取相应标签对应的 javascript对象.style,进行赋值
.square{
width: 300px;
height: 300px;
background: red;
}
//第一种:获取相应标签对应的 javascript对象. style
(function(){
var div= document. getElementsByTagName("div")[0];
div.style.backgroundColor=red;
div style. width= "300px";
div style. height="300px";
})();
第二种:获取相应标签对应的 javascript对象. className
.square{
width: 300px;
height: 300px;
background: red;
}
//第二种:获取相应标签对应的 javascript对象. className
var div= document. getElementsByTagName("div")[0];
div.className="square";
第三种:通过setAttribute("属性名","属性值") [更广义层面上]
.square{
width: 300px;
height: 300px;
background: red;
}
//第三种:通过setAttribute("属性名","属性值")
var div= document. getElementsByTagName("div")[0];
div.setAttribute("class","square");
div.removeAttribute("class");