Question

我有一个jQuery脚本，它通过普通的CSS width属性将元素的宽度设置为50％。

如果我然后输出该元素的outerWidth(true)以获得确切的像素值，它有时与$(window).width()/2不对应 - 这取决于网站的主题。不幸的是，我不能在网上为这种行为带来一个演示。

是否有任何特定的CSS属性可能导致这种差异？

问题是outerWidth()报告的内容为564px，但是当我检查Safari检查程序时，它会显示580。所以该函数的返回是不正确的，我希望能够知道原因是什么。

演示：

http://users.telenet.be/prullen/this/

http://users.telenet.be/prullen/that/

内容（点击红色标签时的灰色区域）应该通过负边距隐藏在加载中，但由于（错误的？）返回jquery，它不在其中一个主题中（显示略）。

console.log调用是：

        console.log('window width / 2 = ' + $(window).width()/2);
        console.log('doc width /2  = ' + $(document).width()/2);

        console.log('width = ' + defaults.boxWidth);
        console.log('width = ' + $slider.css('width'));
        console.log('width = ' + $slider.width());
        console.log('width = ' + $slider.outerWidth());
        console.log('width = ' + $slider.outerWidth(true));

Answer 1

.outerWidth([includeMargin]) - 返回元素的宽度，以及左右填充，边框和（可选）边距（以像素为单位）。

将[includeMargin]选项设置为true会将边距添加到此数字：

.outerWidth(true) - 返回元素的宽度，以及左右填充，边框，和边距，以像素为单位。

.width() - 返回无单位像素值不包括左右填充，边框或边距。

根据jQuery文档，.width()和.css(width)之间的唯一差异在于后者包含width()只返回的单位（'px'）数字（没有'px'）。

因此，根据定义，如果width()不包含边距，填充和边框，则css(width)

我有一个jQuery脚本，它通过设置元素的宽度为50％普通的CSS宽度属性。

这是将元素本身（不包括边距，填充或边框）设置为其容器的50％。如果窗口是容器，那么元素的宽度将是该容量的50％。

示例：对于宽度为1160像素的窗口，您的脚本将创建一个10％为1160或580像素宽的元素（不包括边距，填充或边框）。

如果我然后输出该元素的outerWidth(true)以获得确切的结果像素值，有时与$(window).width()/2不对应。

当您使用outerWidth(true)查看相同的元素时，现在您正在为该数字添加边距，填充或边框。

使用我的相同示例：使用1160像素的窗口，$(window).width()/2将是580.假设您的元素也是580像素，.outerWidth(true)将添加（或减去）边距，添加边框并为元素本身添加填充，这样你就不会得到580，除非边距，填充和边框都为零。

很自然地，使用不同的“主题”（使用您的定义），元素可能会有不同的填充，边框和边距。我不能肯定地说，因为我看不到你的任何代码。

只需使用.width()代替.outerWidth(true)即可在所有主题中保持一致。

修改

在Safari控制台中，我看到body上的边距导致您描述的内容。在consolidated-screen-2.css工作表内，您的左边距为20像素。

在进行计算时，您必须考虑此身体边距。

由于您的JavaScript没有动态更新，而且这不在jsFiddle中，我无法进一步测试它。当我在DOM中将边距设置为0时，我无法调用JS重新计算数字而不重新加载页面，这当然会消除我的DOM覆盖。

一种解决方案是在所有计算中坚持.width()（忽略边距）。

替代解决方案似乎包括将body边距设置为零。

编辑2：

你一直说它的报道不正确，但是我的屏幕上有一个半透明的像素标尺实用程序覆盖了以下内容，一切都在检查......
在1228像素宽的窗口中
This page。标尺验证了这一点。

console.log('width = ' + $slider.outerWidth(true)); = 1188

1188 加 40像素（body左/右边距）= 1228（与标尺相同）

抽屉打开，标尺验证它正好是614像素宽（没有右边框）。

console.log('width = ' + $slider.css('width')); = 594 px;

594 加 20像素（body左边距）= 614（与标尺相同）

console.log('width = ' + $slider.width()); = 594

594 加 20像素（body左边距）= 614（与标尺相同）

Answer 2

width和outerWidth(true)应该是两个不同的东西。第一个不包括填充，边框或边距 - 第二个。

如果您希望outerWidth恰好是窗口宽度的一半，则必须明确考虑这些内容：

var $el = $('#el');
var wid = $(window).width()/2
     - parseInt($el.css('padding-left')) - parseInt($el.css('padding-right'))
     - parseInt($el.css('border-left')) - parseInt($el.css('border-right'))
     - parseInt($el.css('margin-left')) - parseInt($el.css('margin-right'))
// assumes all those things are set using pixels, not em or percent or something
$el.width(wid);

$（element）.outerWidth（true）根据主题报告不同？

2 个答案: