Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Seu
    Seu is offline
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JS/DOM - Changing a CSS property inside a class

    Hi there,

    I'm trying to dinamicly change a value of a property inside CSS class, but I don't know how to get to the object.

    The original CSS code to be changed :
    Code:
    ul.dropdown li { 
    	float: left; 
    }
    I want to change the float value to "right".
    Till now, I had no problem of changing objects through 'getElementById' and 'getElementsByTagName', but here i'm stuck, because I don't now how to reach the element inside the class.

    Tried to work with 'getElementsByClassName' also, but no luck (tests on FF.20), like this -
    Code:
    obj=document.getElementsByClassName('dropdown').getElementsByTagName("li");
    	for (i=0;i<obj.length;i++) { 
    	    obj[i].style.cssFloat="right";
    	}
    Will appreciate any help !

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Both getElementsByClassName and getElementsByTagName return a HTML collection (a kind of array). So you will have to do a nested loop ... one loop is not enough
    Code:
    var classElements=document.getElementsByClassName('dropdown');
    for (i=0;i<classElements.length;i++) { 
       var LI = classElements[i].getElementsByTagName("li");
       for (j=0; j<LI.length; j++) {
          LI[j].style.cssFloat="right";
       }
    }

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,380
    Thanks
    11
    Thanked 592 Times in 572 Posts
    with modern syntax, you only need one 'loop' and no vars:
    Code:
    [].slice.call(document.querySelectorAll("ul.dropdown li")).sort(function(elm){
    	elm.style.cssFloat="right";
    });
    note that .sort() is being used as a poor-man's forEach for IE8 compat...

    -or-

    you can simply append a new rule to the CSS, and it will over-ride previously defined rules of the same specificity:

    Code:
    var sheets=document.styleSheets; //get all sheets
    var sheet=sheets[sheets.length-1]; //get most recent sheet
    sheet.addRule("ul.dropdown li", "float:right"); //add rule to sheet
    Last edited by rnd me; 05-31-2013 at 09:58 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    115
    Thanks
    8
    Thanked 7 Times in 7 Posts
    jQuery makes life SO much easier!

    If your javascript is solid and you are resisting the change: don't resist! It'll be the best thing you've learned since javascript!


  •  

    Tags for this Thread

    Posting Permissions

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