[RESOLVED] What are attributes and properties, in relation to jQuery and browsers
Results 1 to 6 of 6

Thread: [RESOLVED] What are attributes and properties, in relation to jQuery and browsers

  1. #1
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,666

    resolved [RESOLVED] What are attributes and properties, in relation to jQuery and browsers

    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
    Code:
    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
    Code:
    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?

  2. #2
    Senior Member traq's Avatar
    Join Date
    Jun 2011
    Location
    so.Cal
    Posts
    949
    Quote Originally Posted by johanafm View Post
    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.

    Quote Originally Posted by johanafm View Post
    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.

    Quote Originally Posted by johanafm View Post
    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
    Code:
    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
    Code:
    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 className; the attribute name is class.

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

  3. #3
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,666
    Thanks!
    Quote Originally Posted by traq View Post
    The property name is className
    Oh I had forgotten that. And you are right. Using either attr('class', 'A') or prop('className', 'A') works equally fine.

    Quote Originally Posted by traq View Post
    Why not use jQuery("selector").removeClass()?
    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.

    Quote Originally Posted by traq View Post
    I would think that would be the most reliable way. With no args, it removes all classes. I'd stick with jQuery("selector").attr("style","") for the styling.
    I still don't get this. But perhaps I just have to learn that it's the way it is.

  4. #4
    Senior Member Derokorian's Avatar
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    1,787
    Quote Originally Posted by johanafm View Post
    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.
    Sadly, nobody codes for anyone on this forum. People taste your dishes and tell you what is missing, but they don't cook for you. ~anoopmail
    I'd rather be a comma, then a full stop.
    User Authentication in PHP with MySQLi - Don't forget to mark threads resolved - MySQL(i) warning

  5. #5
    Senior Member traq's Avatar
    Join Date
    Jun 2011
    Location
    so.Cal
    Posts
    949
    right; .removeClass() is a shortcut to do .removeClass("list every class the element has").

  6. #6
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,666
    That's good to know. But I still personally prefer the straight assignments in this case
    Code:
    jQuey('selector').attr({'class' : 'A', 'style' : ''});

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •