HTMLDOM_innerHEML
HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMLDOM</title>
</head>
<body>
<!--id为div1的标签-->
<div id = "div1">
div
</div>
<script >
<!-- 获取div1-->
var div = document.getElementById("div1");
//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
var innerHTML = div.innerHTML;
//页面展示
//alert(innerHTML);
//div标签中替换一个文本输入框
// div.innerHTML = "<input type = 'text'>";
//div标签中追加一个文本输入框
div.innerHTML += "<input type = 'text'>";
</script>
</body>
</html>
HTMLDOM_样式控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
/*<!-- id为d1的标签-->*/
d1{
/*边框1，实线，红色*/
border: 1px solid red;
/*宽100*/
width: 100px;
/*高100*/
height: 100px;
}
/*id为d2的标签*/
d2{
/*边框1，实线，蓝色*/
border: 1px solid blue;
/*宽200*/
width: 200px;
/*高200*/
height: 200px;
}
</style>
</head>
<body>
<!--id为-->
<div id="div1">
div1
</div>
<div id="div2">
div2
</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 = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d1";
}
</script>
</body>
</html>
标签：style,样式,HTMLDOM,innerHTML,div,innerHEML,div2,div1 From： https://www.cnblogs.com/yuzong/p/16832337.html