style.width、clientWidth、offsetWidth

先演示再说结论：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#box1{width: 100px;height: 100px;background-color: coral; padding:10px;border:10px red solid;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");alert("hello");console.log(box1.style.width);console.log(box1.clientWidth);console.log(box1.offsetWidth);console.log(box1.width);}</script>
</head>
<body><div id="box1" style="width: 100px;height: 100px;"></div></body>
</html>

输出：

说明如下内容，三个属性表示的位置：

即：
style.width = content的width
clientWidth = width + padding-left + padding-right
offsetWidth = width + padding-left + padding-right +border-left +border-right

style.width、clientWidth、offsetWidth相关推荐

js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
offsetWidth、clientWidth、scrollWidth如何计算
offsetWidth.clientWidth.scrollWidth如何计算先贴一下测试用html,很简单 <!DOCTYPE html> <html lang="en ...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 注意: 下面元素属性和元素方法都通过 e ...
offsetWidth、clientWidth、scrollWidth三者的区别
client可视区 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等. offse ...
offsetWidth、offsetHeight、clientHeight、clientWidth、scrollHeight、scrollWidth详细对比
offsetWidth.offsetHeight.clientHeight.clientWidth.scrollHeight.scrollWidth详细对比代码测试 box-sizing:conte ...
html offsetwidth 字符串宽度,scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
offsetWidth、clientWidth、innerWidth之间的区别
总是记不住的差别,现在记录下来! offsetWidth 水平方向width+左右padding+左右border - width: offsetHeight 垂直方向height+上下padding ...

style.width、clientWidth、offsetWidth

style.width、clientWidth、offsetWidth相关推荐

最新文章

热门文章