一、操作元素样式
1.标签对象.style="css样式=值;...;css样式=值";
2.标签对象.style.css样式="值"；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
#1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="1">1</div>
<script>
//操作元素样式
var demo=document.getElementById("1");
//demo.style="width: 100px;height: 100px;background-color: blue;";//方法1
demo.style.width="200px";//方法2
demo.style.height="200px";
demo.style.backgroundColor="green";
</script>
</body>
</html>二、操作元素内容
1.标签对象.innerText
2.标签对象.innerHTML
（1）获取时：innerText只能获取文本内容，innerHTML不仅能获取文本内容，还能获取标签。
（2）设置时：innerText会将标签当做文本放进去，innerHTML放进去的标签能被浏览器编译。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素</title>
</head>
<body>
<div id="test">
hello!
<p>p标签</p>
</div>
<script>
var demo=document.getElementById("test");
//获取标签中的内容
console.log(demo.innerText);//值获取文本
console.log(demo.innerHTML);//获取所以（包括标签）
//设置标签内容
var str="<h1>123456<h1>";
//demo.innerText=str;//会将标签当做文本放进去
demo.innerHTML=str;//会将标签当做标签放进去
</script>
</body>
</html>#学无止境#
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
