javascript - 为什么我不能使用 jQuery prop 来获取 CSS 设置？

Question

在 HTML 文件中，我创建了一个 DOM 元素:

<div id="colorOne"></div>

然后我在 css 文件中设置属性:

#colorOne{
    position: absolute;
    top: 70%;
    left: 8%;
    width: 36px;
    height: 36px;
    border-color: black;
    border-width: 5px;
    border-style: solid;
    background-color: white;    
}

然而，如我所愿

$('#colorOne').prop('width');    $('#colorOne').prop('height'); 

如果我想通过$.prop获取元素colorOne的任何属性，它只会显示undefined。但我也注意到，如果我将 prop 更改为 css，我可以获得我想要的。

如果我写

<div id="colorOne" style="width:36px;"></div>

$.prop 有效。

我想知道这是为什么。浏览器引擎如何处理这两种不同的写法？

(1.内联样式 2.在.css文件中设置属性)

Answer 1

如果你想用 jQuery 获得最终的计算样式，你需要使用 .css() .

这使用 getComputedStyle内部，因此您可以将它与来自多个不同来源的样式一起使用。

这是 jQuery 在内部做的事情:

function (elem, name) {
    var ret, defaultView, computedStyle, width, style = elem.style;

    name = name.replace(rupper, "-$1").toLowerCase();

    if ((defaultView = elem.ownerDocument.defaultView) && (computedStyle = defaultView.getComputedStyle(elem, null))) {

        ret = computedStyle.getPropertyValue(name);
        if (ret === "" && !jQuery.contains(elem.ownerDocument.documentElement, elem)) {
            ret = jQuery.style(elem, name);
        }
    }

    // A tribute to the "awesome hack by Dean Edwards"
    // WebKit uses "computed value (percentage if specified)" instead of "used value" for margins
    // which is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
    if (!jQuery.support.pixelMargin && computedStyle && rmargin.test(name) && rnumnonpx.test(ret)) {
        width = style.width;
        style.width = ret;
        ret = computedStyle.width;
        style.width = width;
    }

    return ret;
}

当您执行 .attr 或 .prop 调用时，您正在读取 HTML 特性/属性，不是样式。如果您阅读 style 属性，您只会得到 那个 而不是来自所有样式表等的实际计算样式。