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 ?

Answer 1

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