How to dynamically change CSS style?

Question

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 dynamically change nav-index and nav-up only ?

Is it possible to move those inline styles to a separate style sheet? — biziclop
– biziclop, Commented Feb 25, 2012 at 13:05

check123 · Accepted Answer · 2012-02-25 13:05:23Z

4

document.getElementById('a1').style.navIndex = newIndex;
document.getElementById('a1').style.navUp = newValue;

Note that as per this and this, nav-index and nav-up are only supported by Opera.

answered Feb 25, 2012 at 13:05

check123

2,0292 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2023-01-24 17:32:05Z

3

[2023] See this Stackblitz snippet

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;
}

edited Jan 24, 2023 at 17:32

answered Feb 25, 2012 at 13:07

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Comments

Ghost Answer · Accepted Answer · 2012-02-25 13:08:33Z

0

create a new css and call them using like this

function changeClass (elementID, newClass) {
    var element = document.getElementById(elementID);

    element.setAttribute("class", newClass); //For Most Browsers
    element.setAttribute("className", newClass); //For IE; harmless to other browsers.
}

answered Feb 25, 2012 at 13:08

Ghost Answer

1,4982 gold badges18 silver badges41 bronze badges

Comments

Shekhar · Accepted Answer · 2012-02-26 00:17:57Z

-1

You can use jquery to change nav-index and nav-up.

$('a#a1').attr('nav-index', '2'); //If you want to change it to 2.
$('a#a1').attr('nav-up', '#5'); //If you want to change it to #5.

answered Feb 26, 2012 at 0:17

Shekhar

8981 gold badge13 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to dynamically change CSS style?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related