How to dynamicaly change css style?


Tags: javascript,css

Problem :

I have simple element:

<a id="a1" href="#" style="position:absolute;top:0  ;left:0  ;nav-index:1;nav-down:#b1;nav-right:#a3;nav-left:#a1;nav-up:#a1">A1</a>

How to dynamicaly change nav-index and nav-up only ?



Solution :

Like this:

var a1 = document.getElementById('a1');
a1.style['nav-index'] = /* somevalue */;
a1.style['nav-up']    = /* somevalue */;
// or (style properties with hypens must be converted
// to a camel case representation for use in 'dot notation')
a1.style.navIndex = /* somevalue */;
a1.style.navUp    = /* somevalue */;
// and to retrieve the original values:
a1.style['nav-index'] = '';
a1.style['nav-up']    = '';

Furthermore it's advisable to move the inline styling to a class in a css file.

.a1nav {
 position:absolute;
 top:0;
 left:0;
 nav-index:1;
 nav-down:#b1;
 nav-right:#a3;
 nav-left:#a1;
 nav-up:#a1;
}

    CSS Howto..

    asp.net mvc view css not showing as expected

    How to serve css files in djangos's flatpages?

    How to limit a table cell to one line of text using CSS?

    How to select, focused textarea?

    How can I test websites for Mobile Devices

    How do I get my divs to ease in right after eachother on page load?

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How do I get the Twitter Widget to act as if any other element?

    How to overwrite styling in Twitter Bootstrap

    How do I create a teardrop in HTML?

    how to use css button to post method in a form?

    How to style CSS role

    How to center a navbar

    bootstrap css, how to make full width div inside container

    how do I float a div over a background image in a different div

    Make a slide show by fading in background images [closed]

    How to change tooltip style in jQuery vmap?

    How find all elements with a specific css property in a div and add a class to div

    How to display .entry-content CSS on Wordpress home page?

    How can I add spaces between two lines using CSS?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    how to crop images that has any size using css

    How to create a box with line and add icon on side [closed]

    How can I attach a method to an object to change CSS

    How to ask browsers to refresh (flush) the cache of my website?

    How to draw image dynamically on a canvas line between two cells

    How to get actual (not original) height of a CSS-rotated element

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How can I float a bunch of divs and still get overflow?