offset与style的区别
Posted yanlei369343
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了offset与style的区别相关的知识，希望对你有一定的参考价值。
offset
-
offset 可以得到任意样式表中的样式值
-
-
offsetWidth 包含padding+border+width
-
offsetWidth 等属性是只读属性，只能获取不能赋值
-
所以，我们想要获取元素大小位置，用offset更合适
style
-
style 只能得到行内样式表中的样式值
-
style.width 获得的是带有单位的字符串
-
style.width 获得不包含padding和border 的值
-
style.width 是可读写属性，可以获取也可以赋值
-
所以，我们想要给元素更改值，则需要用style改变
因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;padding: 10px;}</style></head>
<body><div class="box" style="width: 200px;"></div><script>// offset与style的区别var box = document.querySelector(‘.box‘);console.log(box.offsetWidth);console.log(box.style.width);// box.offsetWidth = ‘300px‘;box.style.width = ‘300px‘;</script></body>
</html>
以上是关于offset与style的区别的主要内容，如果未能解决你的问题，请参考以下文章
JS下offsetLeft，style.left，以及jQuery中的offset().left，css("left")的区别。