I thought I had this down, but then it turns out - only sometimes.

Looking at jQuery docs for prop

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox.

This lead me to believe that attributes are the html element attributes, whereas properties are DOM node properties. If so, modifying the page through user interaction will update properties but never attributes. And likewise, making changes to properties will always make corresponding changes in what is displayed, while settings attributes will not necessarily create changes on screen.

Then, a little further up on the same page

$( elem ).attr( "checked" ) (1.6) "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+) "checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6) true (Boolean) Changed with checkbox state

They seem to have gone from not respecting this (pre 1.6) to respecting it (1.6) to not respecting it again, while at least keeping the attribute value in line with what it should be (1.6.1+). So, now an attribute is a property-attribute?

Either way, the reason I'm asking is that I needed to be able to set the current state values of some elements class and style. Let's say these elements had class="A B C" and I needed to set class="A". They also had style="width: 230px; other: stuff;" which I needed to set to style="".
That is, after the changes they should all have nothing affecting their current styling except that from class A as defined in stylesheets.

As I understood it, this would be done with

jQuery('selector').prop('class', 'A');
jQuery('selector').prop('style', '');

This works in FF. It does not work in Chrome or Safari. As soon as I realized these elements retained their class and style values (properties?), I tried switching to

jQuery('selector').attr('class', 'A');
jQuery('selector').attr('style', '');

which works in all three browsers. But… but… why would changing those values affect the DOM properties while setting the DOM properties does not affect DOM properties?

What am I missing?

    johanafm;11036343 wrote:

    This lead me to believe that attributes are the html element attributes, whereas properties are DOM node properties. If so, modifying the page through user interaction will update properties but never attributes. And likewise, making changes to properties will always make corresponding changes in what is displayed, while settings attributes will not necessarily create changes on screen.

    AFAIK, this is correct.

    johanafm;11036343 wrote:

    They seem to have gone from not respecting this (pre 1.6) to respecting it (1.6) to not respecting it again, while at least keeping the attribute value in line with what it should be (1.6.1+). So, now an attribute is a property-attribute?

    I don't believe anything about the DOM changed. I would suspect that jQuery is just doing this for "convenience," to lessen (increase?) confusion on the subject.

    johanafm;11036343 wrote:

    Either way, the reason I'm asking is that I needed to be able to set the current state values of some elements class and style. Let's say these elements had class="A B C" and I needed to set class="A". They also had style="width: 230px; other: stuff;" which I needed to set to style="".
    That is, after the changes they should all have nothing affecting their current styling except that from class A as defined in stylesheets.

    As I understood it, this would be done with

    jQuery('selector').prop('class', 'A');
jQuery('selector').prop('style', '');

    This works in FF. It does not work in Chrome or Safari. As soon as I realized these elements retained their class and style values (properties?), I tried switching to

    jQuery('selector').attr('class', 'A');
jQuery('selector').attr('style', '');

    which works in all three browsers. But… but… why would changing those values affect the DOM properties while setting the DOM properties does not affect DOM properties?

    What am I missing?

    The property name is [font=monospace]className[/font]; the attribute name is [font=monospace]class[/font].

    Why not use [font=monospace]jQuery("selector").removeClass()[/font]? I would think that would be the most reliable way. With no args, it removes all classes. I'd stick with [font=monospace]jQuery("selector").attr("style","")[/font] for the styling.

      Thanks!

      traq;11036345 wrote:

      The property name is [font=monospace]className[/font]

      Oh I had forgotten that. And you are right. Using either attr('class', 'A') or prop('className', 'A') works equally fine.

      traq;11036345 wrote:

      Why not use [font=monospace]jQuery("selector").removeClass()[/font]?

      I was using something called "swiper" which adds a bunch of classes upon object creation. I sometimes needed to remove these swipers. The problem is that the destroy() method didn't clean up everything as it was before creating the swiper. All added classes were left along with some added style attribute values. Since I needed to return these elements to their pre-swiper state, it was easier to assign one class than remove a whole bunch of them.

      traq;11036345 wrote:

      I would think that would be the most reliable way. With no args, it removes all classes. I'd stick with [font=monospace]jQuery("selector").attr("style","")[/font] for the styling.

      I still don't get this. But perhaps I just have to learn that it's the way it is.

        johanafm;11036347 wrote:

        Since I needed to return these elements to their pre-swiper state, it was easier to assign one class than remove a whole bunch of them..

        I think the point here is that .removeClass with no argument removes ALL classes so you can do jQuery(selector).removeClass().addClass('someClass'); and be left with only someClass.

          right; [font=monospace].removeClass()[/font] is a shortcut to do [font=monospace].removeClass("list every class the element has")[/font].

            That's good to know. But I still personally prefer the straight assignments in this case

            jQuey('selector').attr({'class' : 'A', 'style' : ''});
              Write a Reply...