js如何获取元素的宽度(js通过class获取元素的方法)

在JavaScript中,要获取元素的宽度可以使用不同的方法,下面分两种情况介绍一下获取元素宽度的方法。

第一种情况:宽度写在行内样式中。代码:

<div id=”demo” style=”width: 200px; height: 100px; padding: 5px; border: 1px solid blue; background-color: pink;”>hello</div>
js如何获取元素的宽度(js通过class获取元素的方法)

针对这种情况可以使用如下4种方法获取元素的宽度。

(1)使用style对象的width属性

这种方法获取的宽度中包含宽度的单位“px”。代码: <script type=”text/javascript”> var div = document.getElementById(“demo”); alert(div.style.width); //200px </script>

(2)使用clientWidth属性

这种方法获取的是元素可视部分的宽度,即CSS中的width和padding属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域。代码:

<script type=”text/javascript”> var div = document.getElementById(“demo”); alert(div.clientWidth); //210 </script>

(3)使用offsetWidth属性

这种方法获取的是元素在页面中占据的宽度总和,包括CSS中的width、padding、border 以及滚动条的宽度。代码:

<script type=”text/javascript”> var div = document.getElementById(“demo”); alert(div.offsetWidth); //212 </script>

(4)使用Window对象的getComputedStyle()方法

getComputedStyle()方法用于获取指定元素的CSS样式,通过CSS样式中的width属性即可获取元素的宽度。这种方法获取的是元素内容的宽度,和CSS中的padding、border等属性无关。代码:

<script type=”text/javascript”> var div = document.getElementById(“demo”);

alert(window.getComputedStyle(div).width); //200px </script>

第二种情况:宽度写在嵌入样式或外部样式表中。代码:

<style type=”text/css”> #demo{ width: 200px; height: 100px; padding: 5px; border: 1px solid blue; background-color: pink; } </style>

针对这种情况,使用style对象的width属性不能获取到元素的宽度,要获取元素的宽度可以使用clientWidth属性、offsetWidth属性或getComputedStyle()方法。

总结如下:

(1)style对象的width属性既能读取也能写入,因此通过width属性可以修改元素的宽度,而getComputedStyle()方法只能读取不能写入。所以,可以使用getComputedStyle()方法获取元素的宽度,通过width属性修改元素的宽度。

(2)要获取元素可视部分的宽度使用clientWidth属性。

(3)要获取元素在页面中所占的总宽度使用offsetWidth属性。

发表评论

登录后才能评论