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