0

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

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

如果我写

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

和$.prop作品。

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

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

4

2 回答 2

1

css是你想要的。

尝试：

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

$.prop用于访问name,href等属性。

如果您仍想使用prop，则必须在 html 元素中设置width,height属性。 

<div id="colorOne" width='36px'></div>
$('#colorOne').prop('width');

上面的工作是因为，width是元素的一个属性#colorOne。无论如何，如果width元素被 js 或 css(using ) 更改，会给你错误的答案。但会给你正确的。!important$.prop$.css

于 2013-06-08T13:25:55.323 回答
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属性，您只会得到该属性，而不是所有样式表等的实际计算样式。

于 2013-06-08T13:30:01.383 回答