JS Function to Change Some Item in CSS File

Question

I am trying to change some CSS parameters for HTML element based on the mouseOver status (true/false)

Ex:

When mouseOver=true the text color should be changed to blue

When mouseOver=false the text color should use the value in CSS file

The problem here, how I can tell the function to look into the original value in CSS file instead of passing the original value manually through the function?

Below is my code. n=the mouse status. And I am changing the visibility value based on n value.

In the IF statement, how I can tell the function to use the original value that already in CSS file?

function showitem(n) {
    if (n==true) {
        document.getElementById('colorstest').style.visibility = 'visible';
    }
    if (n==false) {
        document.getElementById('colorstest').style.visibility = 'hidden';
    }
}

techfoobar · Accepted Answer · 2012-11-04 17:09:31Z

1

Setting it to an empty string will force it to use the value defined in CSS. The reason for this is empty string is an invalid value and the browser will resort to using the next available valid value defined, i.e. from your CSS.

i.e. document.getElementById('colorstest').style.visibility = '';

also, you do not need 2 if statements there, an else would do.

if (n==true) {
    document.getElementById('colorstest').style.visibility = '';
}
else {
    document.getElementById('colorstest').style.visibility = 'hidden';
}

answered Nov 4, 2012 at 17:09

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

Collectives™ on Stack Overflow

JS Function to Change Some Item in CSS File

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related