HTML DOM：针对 HTML 文档的标准模型，定义了所有HTML元素的对象和属性,以及访问他们的方法
标签体的设置和获取：innerHTML
代码2：
<body>
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
var view = div.innerHTML;
// alert(view);
// div 中替换一个文本输入框
// div.innerHTML = "<input type='text'>";
// div 中追加一个文本为输入框
div.innerHTML += "<input type='text'>";
</script>
</body>
使用html元素对象的属性控制元素样式
1. 用元素的style属性来设置，适用于样式较少的情况
<body>
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
// 设置样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
// font-size ---> fontSize
div1.style.fontSize = "50px";
}
</script>
</body>
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值，适用于样式较多的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div2">
div
</div>
<script>
var div2 = document.getElementById("div2");
div2.onclick = function () {
// 设置样式方式2
div2.className = "d1";
}
</script>
</body>
</html>
3029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
