Question

我有一个DIV。这个div有一个6px的填充。

我正在运行这个jQuery：

$('.target').height(150);

但是当我在chrome检查器中查看HTML时，我发现它应用了以下内容：

style="height: 162px;"

如何让jQuery应用150px，而不是150px + padding？

Answer 1

您正在使用全局box-sizing设置为border-box。

到 “修复”？您的问题将其设为content-box

.target{
   box-sizing: content-box;
   padding: 6px;
}

<强> jsFiddle demo

无论哪种方式，元素总是直观的表面高度为162（150 + 12px填充），但现在您将看到正确应用的style="height:150" - 如果这让你烦恼的话。

box-sizing是出于正确目的而发明的，我们的开发人员不必经历以下噩梦：1。在%中使用填充2.计算宽度并减去填充大小以创建布局。
因此，我们可以将20px填充设置为%大小的元素a并且根本不打扰 - 如果我们设置宽度为300px，它将不会最终成为340 ;或者如果一个元素有width:50%; padding:20px;，我们确信一个元素可以放在旁边。

因此，如果某个元素继承一个border-box 框大小，jQuery足够聪明，可以补偿填充以获得精确的视觉效果。

https://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

使用box-sizing：border-box更改元素宽度的CSS概念，以包括填充和边框尺寸，就像您自然测量它一样。 1.8之前的jQuery版本没有完全按照边框方式进行培训，但是我们已经修复了这个错误。

检查 jQuery 3.2.1核心代码，您可以找到感兴趣的内容：

function getWidthOrHeight( elem, name, extra ) {

    // Start with computed style
    var valueIsBorderBox,
        styles = getStyles( elem ),
        val = curCSS( elem, name, styles ),
        isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";

    // Computed unit is not pixels. Stop here and return.
    if ( rnumnonpx.test( val ) ) {
        return val;
    }

    // Check for style in case a browser which returns unreliable values
    // for getComputedStyle silently falls back to the reliable elem.style
    valueIsBorderBox = isBorderBox &&
        ( support.boxSizingReliable() || val === elem.style[ name ] );

    // Fall back to offsetWidth/Height when value is "auto"
    // This happens for inline elements with no explicit setting (gh-3571)
    if ( val === "auto" ) {
        val = elem[ "offset" + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
    }

    // Normalize "", auto, and prepare for extra
    val = parseFloat( val ) || 0;

    // Use the active box-sizing model to add/subtract irrelevant styles
    return ( val +
        augmentWidthOrHeight(
            elem,
            name,
            extra || ( isBorderBox ? "border" : "content" ),
            valueIsBorderBox,
            styles
        )
    ) + "px";
}

当然还有augmentWidthOrHeight功能（罪魁祸首或您的150→162）

function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
    var i,
        val = 0;

    // If we already have the right measurement, avoid augmentation
    if ( extra === ( isBorderBox ? "border" : "content" ) ) {
        i = 4;

    // Otherwise initialize for horizontal or vertical properties
    } else {
        i = name === "width" ? 1 : 0;
    }

    for ( ; i < 4; i += 2 ) {

        // Both box models exclude margin, so add it if we want it
        if ( extra === "margin" ) {
            val += jQuery.css( elem, extra + cssExpand[ i ], true, styles );
        }

        if ( isBorderBox ) {

            // border-box includes padding, so remove it if we want content
            if ( extra === "content" ) {
                val -= jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
            }

            // At this point, extra isn't border nor margin, so remove border
            if ( extra !== "margin" ) {
                val -= jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
            }
        } else {

            // At this point, extra isn't content, so add padding
            val += jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );

            // At this point, extra isn't content nor padding, so add border
            if ( extra !== "padding" ) {
                val += jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
            }
        }
    }

    return val;
}

jQuery，height（）没有应用精确值

1 个答案: