element.style 和 window.getComputedStyle的区别
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、读写支持
element.style 支持读写
window.getComputedStyle 只支持 读
注意:window.getComputedStyle IE8+
IE8及以下:currentStyle
二、读写范围
element.style 读取的只是元素的内联样式,即写在元素的 style 属性上的样式;
getComputedStyle 读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式。
示例:
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);
三、使用方法
大多数情况下 通过使用 getComputedStyle 读取样式,通过 element.style 修改样式
window.getComputedStyle() 首先是有两个参数,元素和伪类。第二个参数不是必须的,当不查询伪类元素的时候可以忽略或者传入 null。
这两个方法 返回的对象键名是 css 的驼峰式写法:
background-color -> backgroundColor。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="one" style="font-size: 26px;">111</div>
<script>
let one = document.querySelector('#one')
console.log(one.style.fontSize); // 26px
console.log(window.getComputedStyle(one).fontSize); //26px
console.log(one.style.backgroundColor); // 空
console.log(window.getComputedStyle(one).backgroundColor); //rgb(255, 192, 203)
// 通过上面的测试,可以发现 elemen.style 方式真的不能读取 除 内联样式以外的样式
</script>
</body>
</html>
输出:
通过上面的测试,可以发现 elemen.style 方式真的不能读取 除 内联样式以外的样式
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)