标签: offsetwidth
DOM元素宽度可以是非整数？
我有一个页面的div元素由JavaScript对齐.JavaScript只检查一组div元素以找到max offsetWidth,然后将所有div元素的宽度设置为max offsetWidth.它在大多数浏览器和语言环境中都很完美,但在Mac上的Firefox中法语 - 法语失败了.在这种情况下,div的内容包装.
<div id="divFoo">
Heure de début :
</div>
对于上面的HTML,下面的代码报告"79".
javascript:alert(document.getElementById('divFoo').offsetWidth);
但在代码报告"79.1333px"下面.
javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))
79.1333和79之间的差距使得不正确的宽度设置为内联样式.
我以前认为offsetWidth和width应该总是整数.有没有办法让offsetWidth正确圆？
推荐指数
解决办法
查看次数
offsetHeight和offsetWidth在第一个onclick事件上计算不正确,而不是第二个
我编写了以下脚本来显示隐藏元素,然后将其位置固定到页面中心.
function popUp(id,type) {
var popUpBox = document.getElementById(id);
popUpBox.style.position = "fixed";
popUpBox.style.display = "block";
popUpBox.style.zIndex = "6";
popUpBox.style.top = "50%";
popUpBox.style.left = "50%";
var height = popUpBox.offsetHeight;
var width = popUpBox.offsetWidth;
var marginTop = (height / 2) * -1;
var marginLeft = (width / 2) * -1;
popUpBox.style.marginTop = marginTop + "px";
popUpBox.style.marginLeft = marginLeft + "px";
}
当onclick事件调用此函数时,offsetHeight和offsetWidth计算不正确,因此不能正确地对齐元素.如果我第二次单击onclick元素,则offsetHeight和offsetWidth会正确计算.
我试图以我能想象的各种方式改变秩序,这让我发疯!很感谢任何形式的帮助!
推荐指数
解决办法
查看次数
IE 8 Quirks vs Standards检索offsetHeight/offsetWidth
我正在将我的应用程序转换为使用XHTML严格模式(之前它没有DOCTYPE).但是,我注意到在获取offsetHeight/offsetWidth时出现了明显的降级.这在具有大量DOM元素的页面上非常明显,假设一个表有1列800行,单元格只有一段文本.访问该表中的每个后代元素以获取其偏移维度比IE在Quirks模式下呈现页面时要慢.为什么会这样？有没有人知道帮助IE计算那些offsetValues的技巧？
推荐指数
解决办法
查看次数
offsetWidth返回的值不正确
推荐指数
解决办法
查看次数
Javascript offsetWidth返回undefined
我有一个JS函数,可以获取页面上div的宽度:
function getWidth() {
var container = document.getElementsByClassName('tag');
var message = "The width of the contents width padding: " + container.width + "px.\n";
alert(message);
}
在加载页面之前,该函数不会运行:
<body onload="getWidth()">
而div在CSS中定义为百分比,最大宽度为900px,这是输出应该是什么.但相反,我得到这个警报:
The width of the contents width padding: undefinedpx.
我环顾四周寻找答案,但看起来这应该是有效的.有什么理由不工作？
推荐指数
解决办法
查看次数
ff 中的 offsetWidth 与实际元素宽度不同
不知怎的，我在 Firefox 和 Chrome 中得到了不同的 offsetWidth 结果。我有一个简单的按钮
<button class="someClass">Dropdown<i class="iconRight iconArrowDown"></i></button>
它的 offsetWidth 正好是 89 像素。Chrome 如此说，Photoshop 也如此。即使在 Firefox 中，它也显示为 89 像素元素，但 FirebugsoffsetWidth表示它有 90 像素。jQuery 在 Firefox 中也获得了 90 像素outerWidth()。当我使用宽度来计算时，它需要完全正确。
- 遗憾的是我还不能发布图片
图片1
图2
为什么offsetWidthfirefox的属性不对？
从评论中编辑：
我正在使用自定义字体。禁用字体可以解决问题。然而，在 FF+Linux、FF+Win7 和 Chrome+Win7 上使用自定义字体进行测试 - Windows 7 上的 Firefox 是唯一显示宽度与计算的 offsetWidth 不同的浏览器。尽管由于字体渲染的原因，按钮在 Linux 上有 91 个像素，但计算时没有问题，因为显示的宽度是相同的。现在我可能只能忍受这一点
推荐指数
解决办法
查看次数
观察元素尺寸变化
这不是重复的！我对其他答案的结果不满意。如果您仍然认为它是重复的，请在您认为它是重复的原因之前发表评论！
我必须观察元素的大小变化。我尝试通过在offsetWidth属性上创建一个设置器来做到这一点，如下所示：
const div = document.querySelector("div");
div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));
let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
get: () => width,
set: val => {
width = val;
div.dispatchEvent(new Event("resize"));
}
});
document.querySelector("button").onclick = () => div.style.width = "200px";div {
background-color: #f00;
width: 300px;
height: 300px;
}<div></div>
<button>
Set size
</button>单击红色框以记录尺寸。然后按下按钮。什么都没发生。如果再次单击该框，它仍会显示旧尺寸。为什么这不起作用？
推荐指数
解决办法
查看次数
标签 统计
offsetwidth ×7
javascript ×6
firefox ×2
html ×2
css ×1
dom ×1
height ×1
hidden ×1
html-parsing ×1
onclick ×1
resize ×1
width ×1