1

How can compare the background color of an element, when the color is set with javascript, I want a function that toggles the backgroundColor: 

function toggleBgColor() {
    if(document.getElementById("id").style.backgroundColor === "blue"){
        document.getElementById("ide").style.backgroundColor = "red");
    }else{
        document.getElementById("ide").style.backgroundColor = "blue");
    }
}

The problem is that the comparison is always false, so my background is always blue, but it want the color to switch from blue to red and vice versa when the function is called

Improve this question
1
  • 1
    You'd have to use inline css for this to initially work. Commented May 15, 2015 at 17:35

4 Answers 4

Reset to default
1

Use Window.getComputedStyle() — https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

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

Comments

0

The backgroundColor property can get tricky with various representations of color. Consider changing classes instead:

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

Or more semantically correct:

JavaScript

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}

CSS

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}
Improve this answer

Comments

0

Why not simply add a class that gets toggled?

function toggleBgClass() {
    var element = document.getElementById('id');

    if (element.classList.contains('blue')) {
        element.classList.add('blue');
        element.classList.remove('red');
    }
    else {
        element.classList.add('red');
        element.classList.remove('blue');
    }
}

Now, in your CSS:

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}
Improve this answer

Comments

0

You have written the incorrect code. The correct code is 

    function toggleBgColor()
    {
       if(document.getElementById("ptag").style.backgroundColor === "blue")
       {
         document.getElementById("ptag").style.backgroundColor = "red";
       }
       else
       {   
         document.getElementById("ptag").style.backgroundColor = "blue";
       }
    };

Html File

<html>
    <head>
        <script type="text/javascript" src="js/backgroundtry.js"></script>
    </head>
    <body>
        <p id="ptag" style="background-color:blue;">
            Hi How are you
        </p>
        <a class="mybutton" onclick="toggleBgColor();">
            Change Color
        </a>
    </body>
</html>
Improve this answer

4 Comments

This is jQuery, right? I don't want to use jQuery right now, because I think you don't really know a programming language if you can only use it with a framework
Well there is just click function and ready which is of jQuery here,Just replace with your javascript onclick function and ready with onload and the rest remains the same
Did you try that, when I did console.log(item.style.backgroundColor); i got undefined?
It works exactly the way you need.Let me know what error are you facing.Just copy paste my code and tell me if there is an issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.