dom.style.prop脚本化CSS:读写元素css属性, 可读写行间样式，没有兼容性问题。 window.getComputedStyle(ele,null)。
程序员文章站
2022-07-04 21:34:26
...
脚本化CSS
读写元素css属性：
可读写行间样式，没有兼容性问题；
注意碰到float这样的保留字属性，前面应加css，当然了不加css也是可以改变属性的，不过最好还是加上；
注意组合单词需要变成小驼峰式写法：
组合单词：background-color 变成小驼峰式：backgroundColor
复合属性必须拆解（不拆解浏览器也是可以识别的，不过为了排除兼容性的问题，还是拆解比较好）:
写入的值必须是字符串格式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="float: right"></div>
</body>
<script>
/*
脚本化CSS
读写元素css属性：
可读写行间样式，没有兼容性问题；
注意碰到float这样的保留字属性，前面应加css，当然了不加css也是可以改变属性的，不过最好还是加上；
注意组合单词需要变成小驼峰式写法：
组合单词：background-color 变成小驼峰式：backgroundColor
复合属性必须拆解（不拆解浏览器也是可以识别的，不过为了排除兼容性的问题，还是拆解比较好）:
写入的值必须是字符串格式；
*/
const div = document.getElementsByTagName('div')[0];
div.style.width = '200px';
div.style.height = '200px';
//注意碰到float这样的保留字属性，前面应加css，当然了不加css也是可以改变属性的，不过最好还是加上；
div.style.cssFloat = 'right';
//注意组合单词需要变成小驼峰式写法
div.style.backgroundColor = 'red';
//复合属性必须拆解（不拆解浏览器也是可以识别的，不过为了排除兼容性的问题，还是拆解比较好）
div.style.border = '10px solid blue';//没有拆解
div.style.borderWidth = '20px';//拆解
div.style.borderStyle = 'dashed';//拆解
div.style.borderColor = 'yellow';//拆解
</script>
</html>
查询计算样式：
window.getComputedStyle(ele,null)//第二个参数可以查当前元素的伪类样式；
计算样式只读（可以读行内样式、内联样式，.style只能读取行内样式）；
返回的计算样式的值都是绝对值，没有相对单位；
IE8及IE8以下不兼容（在IE里面想查询样式可以通过：ele.currentStyle）:
计算样式只读；
返回的计算样式的值不是经过转换的绝对值；
IE独有的属性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid red;
background-color: blue;
}
div::after {
content: "";
width: 50px;
height: 50px;
display: inline-block;
background-color: green;
}
</style>
</head>
<body>
<div style="float: right"></div>
</body>
<script>
/*
查询计算样式：
window.getComputedStyle(ele,null)//第二个参数可以查当前元素的伪类样式；
计算样式只读（可以读行内样式、内联样式，.style只能读取行内样式）；
返回的计算样式的值都是绝对值，没有相对单位；
IE8及IE8以下不兼容（在IE里面想查询样式可以通过：ele.currentStyle）:
计算样式只读；
返回的计算样式的值不是经过转换的绝对值；
IE独有的属性；
*/
const div = document.getElementsByTagName('div')[0];
div.style.width = '200px';
div.style.height = '10rem';
//计算样式只读（可以读行内样式、内联样式，.style只能读取行内样式）
console.log(window.getComputedStyle(div, null).width);//200px
console.log(window.getComputedStyle(div, null).border);//1px solid rgb(255, 0, 0)
// 返回的计算样式的值都是绝对值，没有相对单位
console.log(window.getComputedStyle(div, null).backgroundColor);//rgb(0, 0, 255)
console.log(window.getComputedStyle(div, null).height);//160px;
//获取伪元素的属性值
console.log(window.getComputedStyle(div, 'after').width);//50px
//在IE里面想查询样式可以通过：ele.currentStyle
// console.log(div.currentStyle.width);//200px
// console.log(div.currentStyle.height);//10rem
//封装的获取样式的getStyle方法
function getStyle(elem, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[prop]
} else {
return elem.currentStyle[prop];
}
}
console.log(getStyle(div, "width"));//200px
console.log(getStyle(div, "height"));//160px
</script>
</html>