$(element).outerWidth(true)根据主题报告的方式有所不同? [英] $(element).outerWidth(true) reports differently based on theme?

问题描述

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

I have a jQuery script, this sets an element's width to 50% via the normal CSS width attribute.

如果我随后输出该元素的outerWidth(true)以获取确切的像素值，则它有时不对应$(window).width()/2-这是基于站点具有的主题.不幸的是，我无法对此行为进行在线演示.

If I then output the outerWidth(true) of that element to get the exact pixel value, it sometimes does not correspond to $(window).width()/2 - this is based on the theme that the site has. Unfortunately I cannot bring a demo for this behavior online.

是否存在任何可能导致这种差异的特定CSS属性?

Is there any specific CSS attribute that might cause such a difference?

问题是outerWidth()正在报告例如564px，但是当我在Safari检查器中签入时，它会显示580.因此，该函数的返回是不正确的，我希望能够知道是什么原因.

The problem is that the outerWidth() is reporting for example, 564px, but when I check in Safari inspector, it says 580. So the return of that function is incorrect and I'd like to be able to know what is the cause.

演示:

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

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

内容(当您单击红色选项卡时为灰色区域)应该在加载时通​​过负边距隐藏，但是由于jquery的(错误?)返回，它不在以下主题之一(显示轻微).

The content (gray area when you click on the red tab) is supposed to be hidden on load via a negative margin, but due to the (incorrect?) return of jquery, it is not in one of these themes (showing slightly).

console.log调用为:

console.log calls are :

        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));

推荐答案

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

.outerWidth([includeMargin]) - Returns the width of the element, along with left and right padding, border, and (optionally) margin in pixels.

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

Setting the [includeMargin] option to true adds the margins to this number:

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

.outerWidth(true) - Returns the width of the element, along with left and right padding, border, and margin, in pixels.

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

.width() - Returns a unit-less pixel value not including left and right padding, border, or margin.

根据jQuery文档，.width()和.css(width)之间的仅区别在于，后者包括单位('px')，其中width()只是返回数字(不包含' px').

As per jQuery docs, the only difference between .width() and .css(width) is that the latter includes the units ('px') where width() simply returns the number (without the 'px').

因此，按照定义，如果width()不包括边距，边距和边框，那么css(width)

So if, by definition, width() does not include margins, padding, and borders, then neither can css(width)

我有一个jQuery脚本，它通过 正常的CSS宽度属性.

I have a jQuery script, this sets an element's width to 50% via the normal CSS width attribute.

这会将元素本身(不包括边距，填充或边框)设置为其容器的50％.如果窗口是容器，则元素的宽度将是其宽度的50％.

This is setting the element itself (not including margin, padding or borders) to 50% of it's container. If the window is the container, then the element's width will be 50% of that.

示例:使用1160像素宽的窗口，您的脚本将在1160的50％或580像素宽(不包括边距，边距或边框)上创建一个元素.

Example: With a window of 1160 pixels wide, your script will create an element at 50% of 1160, or 580 pixels wide (not including margin, padding or borders).

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

If I then output the outerWidth(true) of that element to get the exact pixel value, it sometimes does not correspond to $(window).width()/2.

当您使用outerWidth(true)查看同一元素时，现在您要在数字上添加边距，填充或边框.

When you look at the same element with outerWidth(true), now you're adding margin, padding or borders to the number.

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

Using my same example: With a window of 1160 pixels, $(window).width()/2 will be 580. Assuming your element is also 580 pixels, .outerWidth(true) will add (or subtract) margins, add border and add padding to the element itself so you are not going to get 580 unless margins, padding and border are all zero.

因此，自然而然地，使用不同的主题"(使用您的定义)，该元素可能将具有不同的填充，边框和边距.我无法肯定地说，因为我看不到您的任何代码.

So naturally, with a different "theme" (using your definition), the element is probably going to have a different padding, border and margins. I cannot say for sure since I cannot see any of your code.

只需使用.width()代替.outerWidth(true)，即可使所有主题的内容保持一致.

Simply use .width() in place of .outerWidth(true) to keep things consistent across all of your themes.

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

In the Safari console, I'm seeing a margin on the body causing what you describe. Inside your consolidated-screen-2.css sheet you have a 20 pixel left margin.

进行计算时，必须考虑此车身边距.

由于您的JavaScript不会动态更新，并且不在jsFiddle中，因此我无法对其进行任何进一步的测试.当我在DOM中将margin设置为0时，如果不重新加载页面就无法调用JS来重新计算数字，这当然会消除我的DOM覆盖.

Since your JavaScript does not dynamically update and this is not in a jsFiddle, I cannot test it any further. When I set the margin to 0 in the DOM, I cannot invoke the JS to recalculate the numbers without reloading the page, which of course, wipes out my DOM over-ride.

一种解决方案是在所有计算中都使用.width()(忽略边距).

One solution would be to stick with .width() (ignore margins) in all your calculations.

另一种解决方案似乎包括将body边距设置为零.

An alternate solution would seem to include setting the body margin to zero.

您一直在说它的报告不正确，但是我的屏幕上覆盖了一个半透明的像素标尺实用程序，用于以下操作，一切都在检查中...

You keep saying it's reporting incorrectly, but I have a semi-opaque pixel ruler utility overlaid on my screen for the following and everything is checking out...

此页面.标尺对此进行验证.

This page in a 1228 pixel wide window. Ruler verifies this.

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

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

1188 plus 40 pixels (body left/right margins) = 1228 (same as ruler)

抽屉处于打开状态，标尺确认其宽度为精确614像素(无右边框).

Drawer is open and ruler verifies it is exactly 614 pixels wide (without the right border).

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

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

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

594 plus 20 pixels (body left margin) = 614 (same as ruler)

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

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

594 plus 20 pixels (body left margin) = 614 (same as ruler)

这篇关于$(element).outerWidth(true)根据主题报告的方式有所不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！