一 . JS操作页面内容
- innerText：普通标签内容（自身文本与所有子标签文本）(不被解析)
- innerHTML：包含标签在内的内容（自身文本及子标签的所有）(被解析)
- value：表单标签的内容
- outerHTML：包含自身标签在内的内容（自身标签及往下的所有）
二 . JS操作页面样式
- 读写 style属性 样式
div.style.backgroundColor = 'red';
// 1.操作的为行间式
// 2.可读可写
// 3.具体属性名采用小驼峰命名法
- 只读 计算后 样式
// eg: 背景颜色
// 推荐
getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color');
// 不推荐
getComputedStyle(页面元素对象, 伪类).backgroundColor;
// IE9以下
页面元素对象.currentStyle.getAttribute('background-color');
页面元素对象.currentStyle.backgroundColor;
// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式为只读
// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)
- 结合 css 操作样式
页面元素对象.className = ""; // 清除类名
页面元素对象.className = "类名"; // 设置类名
页面元素对象.className += " 类名"; // 添加类名
实例
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
.show{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
.hidden{
display: none;
}
.border{
border:1px solid #000;
}
</style>
</head>
<body>
<button class="btn1">显示</button>
<button class="btn2">加边框</button>
<button class="btn3">改颜色</button>
<button class="btn4">加文本</button>
<button class="btn5">隐藏</button>
<button class="btn6">清除文字</button>
<div class="div"></div>
</body>
<script>
var b1 = document.querySelector('.btn1');
var b2 = document.querySelector('.btn2');
var b3 = document.querySelector('.btn3');
var b4 = document.querySelector('.btn4');
var b5 = document.querySelector('.btn5');
var b6 = document.querySelector('.btn6');
var div = document.querySelector('.div');
//显示 操作类名
b1.onclick=function () {
div.className = 'show';
};
//加边框 操作类名
b2.onclick=function () {
div.className +=' border';
};
//改颜色 操作页面样式
b3.onclick=function () {
var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');
console.log(bgColor);
if (bgColor === 'rgb(255, 0, 0)') {
div.style.backgroundColor='orange';
}
else {
div.style.backgroundColor='red';
}
};
//加文本 操作内容
b4.onclick=function () {
div.innerText += '文本';
};
//隐藏 操作类名
b5.onclick=function () {
div.className = 'hidden';
};
//清除文本 操作内容
b6.onclick=function () {
div.innerText = '';
};
</script>
</html>
