JS操作页面样式
一 概念
- 读写 style属性 样式
```js
div.style.backgroundColor = 'red';
// 1.操作的为行间式
// 2.可读可写
// 3.具体属性名采用小驼峰命名法
```
- 只读 计算后 样式
```js
// eg: 背景颜色
// 推荐
getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color');
// 不推荐
getComputedStyle(页面元素对象, 伪类).backgroundColor;
// IE9以下
页面元素对象.currentStyle.getAttribute('background-color');
页面元素对象.currentStyle.backgroundColor;
// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式为只读
// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)
```
- 结合 css 操作样式
```js
页面元素对象.className = ""; // 清除类名
页面元素对象.className = "类名"; // 设置类名
页面元素对象.className += " 类名"; // 添加类名
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js操作页面样式</title>
<style type="text/css">
div#div.div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!-- style="background-color: orange;" 行间式优先级高于任何css选择器 -->
<!-- 低于!important -->
<!-- <div id="div" class="div" style="background-color: orange;"></div> -->
<div id="div" class="div"></div>
<button class="btn">切换</button>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// js操作的就是行间式
// div.style.backgroundColor = 'orange';
// 需求:切换背景颜色 红 <=> 黄
// 1.获取原来的颜色
// 2.判断颜色
// 3.修改颜色
// 因为页面一般采用css样式布局,css布局的样式叫 计算后样式
// 而ele.style.样式只能获取行间式样式
// var bgColor = div.style.backgroundColor;
// console.log(bgColor);
// 获取计算后样式
// getComputedStyle参数: 页面对象 伪类
// getPropertyValue参数: css语法的样式字符串
// var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');
var bgColor = getComputedStyle(div, null).backgroundColor;
console.log(bgColor); // rgb(255, 0, 0)
var btn = document.querySelector('.btn');
// 点击一下
btn.onclick = function () {
// 获取当前颜色一次
bgColor = getComputedStyle(div, null).backgroundColor;
console.log(bgColor);
// 判断并修改
if (bgColor == 'rgb(255, 0, 0)') {
div.style.backgroundColor = 'orange';
} else {
div.style.backgroundColor = 'red';
}
}
</script>
</html>
