Why can't I use jQuery prop to get the CSS setting?

Question

In the HTML file, I have created a DOM element:

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

and I set the attributes in css file:

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

However, as I command

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

If I want to get any attribute of the element colorOne by $.prop, it only shows undefined. But I also noticed that if I change prop to css and I can get what I want.

And if I write

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

And the $.prop works.

I want to know why is that. How does the browser engine handle these two different writing methods?

(1. inline style 2. setting the attributes in .css file)

because `.prop` is similar to `.attr` which reads/modify attributes. to read/modify CSS use `.css`. to read attribute use `.attr`. — Omar, Jun 08 '13 at 13:27
this example shows the differences http://jsfiddle.net/Palestinian/vJ3jv/ — Omar, Jun 08 '13 at 13:32
use `.prop` to `disabled` elements and `checked` radio/checkbox. i'll update the example. check the example again http://jsfiddle.net/Palestinian/vJ3jv/ — Omar, Jun 08 '13 at 13:46

score 1 · Answer 1 · 2013-06-08T13:31:51.563

1

css is what you want.

Try:

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

$.prop is use to access attributes like name, href, etc.

If you still want to use prop, you will have to set width, height attributes in html elements.

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

The above works because, width is an attribute to the element #colorOne. If width of the element is changed by js or css(using !important) in anyway, $.prop will give you wrong answer. But $.css will give you the correct one.

edited Jun 08 '13 at 13:31

answered Jun 08 '13 at 13:25

Yes, I did it. I just want to know why is that. – Alston Jun 08 '13 at 13:26

score 1 · Accepted Answer · answered Jun 08 '13 at 13:30

If you want to get the final, computed style with jQuery you need to use .css().

This uses getComputedStyle internally so you can use it with styles from several different sources.

Here is what jQuery does internally to do this:

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

When you perform a .attr or .prop call you're reading an HTML attribute/property and not a style. If you read the style attribute you're only getting that and not the actual computed style from all the stylesheets etc.

So, it's the problem about the jQuery method. I can only get the attributes only if they are inline style? — Alston, Jun 08 '13 at 13:35
@Stallman That's not what I said at all. Attributes _are_ a part of HTML, there are things that are logically attributes. The `src` attribute of a script or the `href` attribute of a link for example. `.attr` simply isn't the right tool in order to get a computed style of an element. (that's what `.css` is for, and it works with inline styles just fine). See http://jsfiddle.net/qKtB5/ — Benjamin Gruenbaum, Jun 08 '13 at 13:37
Ok... So, in your coding style, do you usually use `$.css` to configure the attribute of the DOM elements? Or how do you configure the attribute of elements? I mean do you usually set the attribute of elements in css file and configure them by using '$.css' instead of '$.prop' or '$.attr' — Alston, Jun 08 '13 at 13:42
@Stallman I rarely use jQuery in my coding style (It's rare when you work with something like Knockout or AngularJS) :) However, when I do, I set _style_ attributes with `.css` (for example, width, height, etc) and _attributes with `.attr` (like src, href, rel). Also see http://stackoverflow.com/questions/5874652/prop-vs-attr — Benjamin Gruenbaum, Jun 08 '13 at 13:44

Why can't I use jQuery prop to get the CSS setting?

2 Answers2