第一种:获取相应标签对应的Javascript的对象.style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种操作方法</title>
<style>
.tss{
background-color: red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="tts"></div>
<script>
(function(){
var div=document.getElementsByTagName("div")[0];
div.style.backgroundColor="red";
div.style.width="400px";
div.style.height="400px";
}
)();
</script>
</body>
</html>
第二种:获取相应标签对应的Javascript的对象.className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种操作方法</title>
<style>
.tts{
background-color: red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="tts"></div>
<script>
var div=document.getElementsByName("tts")[0];
div.className=.tts;
</script>
</body>
</html>
第三种:使用setAttribute(“属性名”,”属性值”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种操作方法</title>
<style>
.tts{
background-color: red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="tts"></div>
<script>
var div=document.getElementsByTagName("div")[0];
div.setAttribute("class","tts");
div.removeAttribute("class");
</script>
</body>
</html>