YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Add a red border to all of the LI elements with the class of selected that live in a UL




    
Using query

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}






#selector-demo ul {
    float:left;
}
#selector-demo ol {
    clear:both;
}




Using query



  

Clicking the button will add a red border to all of the LI elements with the class of "selected" that live in a UL.


      



    

            lorem
            
  • ipsum

    •         
  • dolor

    •         
  • sit

    •     

    

            
  • lorem

    •         ipsum
            
  • dolor

    •         
  • sit

    •     

    

            
  • lorem

    •         
  • ipsum

    •         
  • dolor

    •         sit
        

    

            
  1. lorem

    2.         
  2. ipsum

    3.         
  3. dolor

    4.         sit
        

    run


(function() {
    var handleClick = function(e) {
        var nodes = YAHOO.util.Selector.query('ul li.selected');
        YAHOO.util.Dom.setStyle(nodes, 'border', '1px solid red');
    };
    YAHOO.util.Event.on('demo-run', 'click', handleClick);
    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();





   
  
yui_2.7.0b.zip( 4,431 k)