Javascript 为什么可以'；我不能使用jQuery道具来获取CSS设置吗？

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

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

然而，正如我所命令的

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

如果我想通过

$.prop

获取元素

colorOne

的任何属性，它只显示

未定义的

。但我也注意到，如果我把

prop

改为

css

，我就能得到我想要的

如果我写

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

而

$.prop

也可以工作

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

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

就是您想要的

尝试：

$.prop

用于访问诸如

name

、

href

等属性

如果仍要使用

prop

，则必须在html元素中设置

width

、

height

属性

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

$（'colorOne'）.prop（'width'）；

上述方法之所以有效，是因为，

width

是元素

#colorOne

的一个属性。

---

如果js或css（使用

！important

）更改了元素的

宽度

，

$.prop

将给出错误的答案。但是

$.css

会给你正确的答案

如果希望使用jQuery获得最终的计算样式，则需要使用

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

以下是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属性/属性，而不是样式。如果您阅读

样式

属性，您只会得到它，而不是从所有样式表等中得到的实际计算样式。

是的，我做了。我只是想知道为什么会这样。因为

.prop

类似于读取/修改属性的

.attr

。要读取/修改CSS，请使用

.CSS

。要读取属性，请使用

.attr

。此示例显示了@Omar的差异。此示例非常清楚，谢谢。使用

.prop

禁用

元素并选中
收音机/复选框。我将更新示例。再次检查示例，这就是jQuery方法的问题。只有当属性是内联样式时，我才能获得它们？@Stallman我根本不是这么说的。属性是HTML的一部分，有些东西在逻辑上是属性。例如，脚本的
src
属性或链接的
href
属性
.attr
根本不是获取元素计算样式的正确工具。（这就是
.css
的作用，它可以很好地处理内联样式）。看到没。。。那么，在您的编码风格中，您通常使用
$.css
来配置DOM元素的属性吗？或者如何配置元素的属性？我的意思是，你通常会在css文件中设置元素的属性，并通过使用“$.css”而不是“$.prop”或“$.attr”@Stallman来配置它们吗？我很少在我的编码风格中使用jQuery（当你使用诸如Knockout或AngularJS之类的东西时，这是很少见的）：）然而，当我这样做时，我会使用
.css
设置样式属性（例如，宽度、高度等）和带有
.attr
的_属性（如src、href、rel）。也看到
<div id="colorOne" width='36px'></div>
$('#colorOne').prop('width');

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