如何获取元素的真实宽高

2023-04-26 18:46| 来源: 网络整理| 查看: 265

情况一：

宽高都写在样式表里，即外部样式或嵌入式样式，比如#div{width:120px;}.这种情况通过#div.style.width拿不到宽度，而通过#div.offsetWidth才可以获取到宽度。

情况二：

宽和高是写在行内中的，即内联样式，比如style="width:120px;"这种情况通过上述2种方法都可以得到宽度。

因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1.style.width对应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。代码： var o = document.getElementById("view"); var h = o.offsetHeight; //高度(包括width+padding+border) var w = o.offsetWidth; //宽度(包括height+padding+border) 三种方法方法一：使用jquery $("#id").height(); 方法二：使用dom document.getElementById("id").style.height (需要这样设置才能获取到高度，)； document.getElementById("id").offsetHeight； document.getElementById("id").clientHeight 方法三：window.getComputedStyle(document.getElementById("id")).height;

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。语法如下：

var style = window.getComputedStyle("元素", "伪类"); 例如： var dom = document.getElementById("test"), var style = window.getComputedStyle(dom , ":after");

就两个参数，额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。

【本文地址】

如何获取元素的真实宽高

如何获取元素的真实宽高

今日新闻

推荐新闻