239、javaScript对象---HTML DOM对象之控制样式（style）
程序员文章站
2022-07-04 20:06:12
...
可以利用元素的style属性来设置样式，有如下方式：
方式一、直接添加
* 步骤
1、通过document.getElementById获取元素对象
2、通过元素对象的style属性来设定元素样式：
元素对象.style.元素要设置的属性名称 = "属性值"
注意：这个方式一次设置一种样式，如果需要多个样式，需要一条一条设置
方式二、配合CCS设定样式
1、提前利用CCS设定好类(class)的样式。
2、通过document.getElementById获取元素对象。
3、通过元素对象的className属性来调取前面定好的类样式
元素对象.className = "前面固定翼好的类样式"
注意：该方式可以一步到位设置多个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div_class1{
border: 2px solid red;
width: 100px;
margin-top: 20px;
}
.div_class2{
border: 2px solid blue;
width: 150px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="div1">
你好，世界！
</div>
<div id="div2">
你好，中国！
</div>
<div id="div3">
你好，江西！
</div>
<script>
// 方式一
var emt = document.getElementById("div1");
emt.style.border = "1px solid red";
emt.style.width = "300px"
//方式二
var emt = document.getElementById("div2")
emt.className = "div_class1";
var emt = document.getElementById("div3")
emt.className = "div_class2";
</script>
</body>
上一篇： HTML DOM style属性操作
下一篇： JavaScript(Day3)