$(element).outerWidth(true)根据主题报告不同？

Question

我有一个jQuery脚本,它通过普通的CSS宽度属性将元素的宽度设置为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文档,和之间的唯一区别是后者包括单位('px'),其中只返回数字(没有'px')..width().css(width)width()

因此,根据定义,width()如果不包括边距,填充和边框,则两者都不能css(width)

我有一个jQuery脚本,它通过普通的CSS宽度属性将元素的宽度设置为50%.

这是将元素本身(不包括边距,填充或边框)设置为其容器的50%.如果窗口是容器,那么元素的宽度将是该窗口的50%.

示例: 对于宽度为1160像素的窗口,您的脚本将创建一个50%的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像素宽的窗口中.标尺验证了这一点.

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

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

抽屉打开,标尺验证它正好是614像素宽(没有右边框).

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

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

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

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