简介
一般我们有两种方式来获取前端的样式
第一种
- 获取的到元素，然后读取元素的
style属性 - 这里获取的都是内敛标签上面的样式，在css样式表上面的是获取不到的
第二种
- 通过getComputedStyle来获取元素最终展示的样式
- 他可以获取多个属性
第三种
第三种只获取位置
- 使用
getBoundingClientRect来进行获取
例子
<body>
<div id="box" style="width: 200px; height:200px;">
</div>
<style>
#box{
background-color: red;
}
</style>
<script>
const box = document.getElementById("box")
// 第一种方式
console.log(box.style);
// 第二种方式
console.log(getComputedStyle(box));
</script>
</body>
我们看他们的打印
他们打印的对象是相同的
box.style的打印
在属性是数字的，就表示能获取到的属性，他只有两个就是标签上的属性
getComputedStyle的打印
我们发现他有很多，也就是css的属性都能获取
getBoundingClientRect的打印
他获取的是DOM的一个对象
他是没有单位的，值获取大小和位置的信息
注意
我们获取到的位置信息他都是有单位的
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
