js知识点总结之getComputedStyle的用法
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
- 第一个：要获取样式的元素
- 第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
1.可以通过 getComputedStyle(对象，null).样式名 的形式来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如：没有设置width，它不会获取到auto，而是一个长度
2.为了更方便的使用 可以加入正则表达式获取样式名
利用 getComputedStyle(样式元素，null)[样式名] 的形式来获取样式
下面举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
left: 100px;
position: absolute;
}
</style>
<script>
window.onload=function(){
//获取box1元素节点对象
var box1=document.getElementById("box1");
//这里调用getComputedStyle来获取left的值
var left=getComputedStyle(box1,null)["left"];
alert("left的值是"+left);
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>可以看到这里是获取box1元素的left属性，我们设置的属性是100px,
运行结果如下：
补充：getComputedStyle与style的区别
我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的（只读与可写）。
1、正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
2、获取的对象范围getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；
而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值
（如果有）就是190+， 而element.style就是0。
总结
到此这篇关于js知识点总结之getComputedStyle用法的文章就介绍到这了,更多相关js getComputedStyle用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js控制文本框只输入数字和小数点的方法,实例分析了javascript使用正则表达式实现限制数字和小数点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了TypeScript使用vscode监视代码编译,使用tsc 文件名称可以将ts文件转化为js文件，js文件可以引入在html文件中直接使用，需要的朋友可以参考下2021-12-12
这篇文章主要为大家详细介绍了JavaScript编写猜拳游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了js拼接字符串时如何在中间加上空格的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了JavaScript实现左右下拉框动态增删示例，可以对下拉框进行删除和增加，非常具有实用价值，需要的朋友可以参考下。2017-03-03
这篇文章主要为大家介绍了js 实现div拖拽拉伸完整示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
JavaScript 定义类或对象,javascript步入高手行列必须要了解的。2009-12-12
这篇文章主要介绍了微信小程序+云开发实现欢迎登录注册，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了万物皆可柯里化的Ramda.js详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了javascript实现图片预加载和懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论