CODEWITHSUNDEEP
javascriptcss
kamesh
kamesh

Reputation: 77

how to change css dynamically through Java script

I am having global css file contains below code 

#menu_left
 {
  color: #004080;
  width: 225px;
  margin: 0px;
  border-style: solid solid none solid;
  border-color: #ffffff;
  border-size: 1px;
  border-width: 1px;
 }

#menu_left li a
{
 color: #222222;
 height: 26px;
 voice-family: inherit;
 text-decoration: none;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}

#menu_left li a:link, #menu_left li a:visited
{
 color: #222222;
 display: block;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}
#menu_left li a:hover
{
 color: #222222;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 font-weight:normal;
 background-color:#B9C4CA;
 font-size:12px;
 font-family:tahoma;
}

as of now i assigned #menuleft id to my div which contains li's(list tag) and each li tag having one anchor tag. all my li's will come in the left side panel as list .once i selected any li it should display some css styles and other should have the above css.

i have written one js function to toggle these css changes on selection and un slection .

but hover css is not applying if do like below ...

function setSelected(selID)//selId is ID for anchor tag in selected li item
{
 //contains all list of anchor tag id's
  var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
  for(i=0;i<anchorID.length;i++)
   {
     if(selID!=anchorID[i])
     {
        var div = document.getElementById(anchorID[i]);
        div.style.fontWeight = 'bold';
        div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
        }
     else

     {
         var div = document.getElementById(selID);
         div.style.fontWeight = 'bold';
         div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');
        }
   }

can any one help me how can i get all css properties in such way that it should work for selection hover and normal while toggeling selection?

Regards, Kamesh

Upvotes: 1

Views: 5513

Answers (4)

thirdender
thirdender

Reputation: 3951

Please see this fiddle. Is this the effect you are going for? It uses jQuery to make the Javascript easier, but switches the styles by toggling a CSS class instead using jQuery's .css() method. There are two reasons for this… The first is that you should separate your code by purpose. HTML should be content, CSS should be styles, and Javascript should be used for logic only (you shouldn't put content or styles in your Javascript if possible). The second reason is that it's much easier to use Javascript to switch a class than to switch styles.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Use jQuery to make your work simpler!

Instead of using this:

div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

When you use jQuery, it will be easy and cross browser compatible. You can do the same using this way:

$('div').attr('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

Or

$('div').css({
    'color': '#FFFFFF', 
    'display': 'block', 
    'padding': '8px 0 0 10px', 
    'border-bottom': 'solid 1px #ffffff', 
    'background-color': '#718296', 
    'font-size': '12px', 
    'font-family': 'tahoma'
});

The .css attribute from jQuery can be used! :)

Upvotes: 1

Torsten Walter
Torsten Walter

Reputation: 5782

In your setSelected you are overwriting the bold style right after you set it. That said, you can deal with css a lot more comfortably.

Instead of setting the css right at the node level, why not use what css was invented for?

You can set a a selected class and in your code just toggle the className

.selected {
   color: #222222;
   height: 26px;
   voice-family: inherit;
   text-decoration: none;
   border-bottom: solid 1px #ffffff;
   background-color:#D3D7D9;
   font-size:12px;
   font-family:tahoma;
}

And a simple JS function takes care of the class swapping:

function setSelected(selID) {
   var anchorIDs = {
       'usersAnchor': true
       'securityAnchor': true
       'passPolAnchor': true
       'activeSessAnchor': true
   };
   var div = document.getElementById(selID),
   className = div.className;

   if (anchorIDs[selID] === true) {
       div.className = className.replace(/\s+(selected)/, " selected");
   } else {
       div.className = className.replace(/\s+(selected)/, "");
   }
}

Upvotes: 1

rogal111
rogal111

Reputation: 5933

I recommend using .css from jQuery API.

Upvotes: 0

Related Questions