Checking color value in javascript

Question

So I set the color of the <body> with:

body
{
    color:Black;
}

within the <head> and <style> tags, and then I've got various elements in the body, for which if I click them, they call a function. i.e.

    <p id="CSE1020" onclick="prereq(this)">CSE1020</p>

The prereq function is as follows:

function prereq(code) {

    if (code.style.color != "black") {
        code.style.color = "black";
        code.style.fontWeight = "normal";
    }
}

And otherwise, if the element is already black, I change the color. The problem/question is: I have to click the element twice before it changes color. In other words, its not 'black' initially. The if statement is executed, even though the default color, before it is clicked should be black. How do I get it to recognize that when I first click the element, that it's 'black'?

An empty string, presumably, since the style is not inline with the element. — David Thomas, Jan 27 '13 at 18:08
This might help: http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — subhaze, Jan 27 '13 at 18:20
@DavidThomas: How do I get the style to be 'inline' with the element? — Joy, Jan 27 '13 at 18:29
once check the output -- `alert(code.style.color);` (may be issue of case sensitivity) — Mr_Green, Jan 27 '13 at 18:46
It returns an empty string, just like Mr.Thomas said it would — Joy, Jan 27 '13 at 18:50

score 0 · Answer 1 · answered Jan 27 '13 at 18:15

Is jQuery an option? If it is you could do this:http://jsfiddle.net/CxayY/

$('#CSE1020').on('click', function(){
    if($('body').css('color')!='black')
    {
        $('body').css('color','black');
        $('body').css('font-weight','normal');
    }
});

score 0 · Answer 2 · answered Jan 27 '13 at 18:28

0

Try searching in CSSRules:

function prereq(code) {
    var cssRules = window.getMatchedCSSRules(code);
    ...
}

answered Jan 27 '13 at 18:28

karaxuna

26,752
13
82
117

score 0 · Answer 3 · answered Jan 28 '13 at 21:21

0

So, it works when I add the style to the element itself, i.e.

    <p id="CSE1020" style="color:black" onclick="prereq(this)">CSE1020</p>

answered Jan 28 '13 at 21:21

Joy

11
2

Checking color value in javascript

3 Answers3