使用jQuery获取元素的实际宽度
使用jQuery获取元素的实际宽度
提问于 2012-04-23 16:41:42
我正在为html文件的“视觉正确性”写一个验证器。目标是检测过宽的元素。
红色虚线表示文档的最大宽度(本例中为200px)。第一段很好，但第二段太宽了。尽管如此，以下所有命令仍然返回"200px“作为宽度：
// all return 200, but the value should be larger
$('#two').width();
$('#two').outerWidth();
$('#two').prop('clientWidth');有关更多详细信息，请参阅Fiddle。
如何检测这种过大的元素？
更新的问题：最好问一问，我如何检测超出父元素边界的文本？
更新的要求：我不被允许改变任何在源代码中的HTML或CSS。但是我可以用jQuery做任何我想做的事情来修改文档，这样我就可以检测出那些太宽的元素。
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-04-23 17:16:06
正如其他人所说，将文本节点临时包装在内联元素中。
var two = document.getElementById('two'),
text = two.firstChild,
wrapper = document.createElement('span');
// wrap it up
wrapper.appendChild(text);
two.appendChild(wrapper);
// better than bad, it's good.
console.log(wrapper.offsetWidth);
// put it back the way it was.
two.removeChild(wrapper);
two.appendChild(text);下面是一个对您应该有用的getInnerWidth函数。向它传递一个元素，它将处理包装和解包。
function getInnerWidth(element) {
var wrapper = document.createElement('span'),
result;
while (element.firstChild) {
wrapper.appendChild(element.firstChild);
}
element.appendChild(wrapper);
result = wrapper.offsetWidth;
element.removeChild(wrapper);
while (wrapper.firstChild) {
element.appendChild(wrapper.firstChild);
}
return result;
}Stack Overflow用户
发布于 2015-12-09 18:22:58
scrollWidth将做到这一点：
$("#two").get().scrollWidth或getElementById("two").scrollWidth
这将输出212px，即您正在寻找的实际宽度。
Stack Overflow用户
发布于 2012-04-23 16:56:38
这种效果被称为"shrinkwrapping"，有几种方法可以确定元素的“实际”宽度。
浮动
你可以使用的方法之一是浮动你的<p>元素，这将强制它尽可能的小，但是如果你的div中的任何东西是浮动的，你将需要使用一个clearfix：
#two { float: left; }内联块元素
插入内联元素应该可以。
<p>content</p>会变成
<p><span>content</span></p>绝对定位元素
将元素位置更改为绝对位置也应该有效：
#two { position: absolute; }如果不能静态更改标记或样式，则始终可以通过JavaScript动态更改它们。
(绝对定位元素)
var realWidth = $("#two").css("position", "absolute").width();(浮点数)
var realWidth = $("#two").css("float", "left").width();(内联-块元素)
var t = $("#two").html();
var realWidth = $("#two")
.empty()
.append($("<span>").html(t))
.width();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10277323
复制相关文章
相似问题