CODEWITHSUNDEEP
javascripthtmlcss
Kyrbi
Kyrbi

Reputation: 2250

CSS triangle changing display value with Javascript

I have got this html

<div id="slideMenu">
    <div id="slideM1" onmouseover="colorM(1)">Something 1</div>
    <div id="slideM2" onmouseover="colorM(2)">Something 2</div>
    <div id="slideM3" onmouseover="colorM(3)">Something 3</div>
    <div id="slideM4" onmouseover="colorM(4)">Something 4</div>
    <div id="slideM5" onmouseover="colorM(5)">Something 5</div>
</div>

and this CSS 

html, body{ 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}
#slideMenu {
    float: right;
}
#slideM1:before, #slideM2:before, #slideM3:before, #slideM4:before, #slideM5:before {
    content: "";
    position: absolute;
    top:0;
    right:210px;
    width: 0;
    height: 0;
    border-top: 32px solid transparent;
    border-right: 30px solid #602F4F;
    border-bottom: 32px solid transparent;
    display:none;
}
#slideM1, #slideM2, #slideM3, #slideM4, #slideM5 {
    background-color: silver;
    height: 54px;
    width: 200px;
    text-align: right;
    position:relative;
    padding: 5px;
    color: white;
    margin-bottom: 2px;
}

and finally this Javascript 

function colorM(n) {
    document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
    document.getElementById("slideM"+n+":before").style.display="block";
}

Here is jsfiddle http://jsfiddle.net/xN6Da/ . As you can see CSS triangle has default value display: none;. But after it's hovered I want to change it's value to be visible. I tried to use document.getElementById("slideM"+n+":before").style.display="block"; but it still hides the triangle, so how to remove that display: none; from CSS with Javascript?

Thank you

Upvotes: 0

Views: 238

Answers (2)

Taylor Hakes
Taylor Hakes

Reputation: 616

You cannot modify pseudo classes via Javascript. You will need to change it by adding/removing a class. For instance, by adding CSS like this:

#slideM1.show:before, #slideM2.show:before, #slideM3.show:before, #slideM4.show:before, #slideM5.show:before {
   display: block;
}

and this Javascript

function colorM(n) {
    document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
    document.getElementById("slideM"+n+).className="show";
}

Here is the fiddle. http://jsfiddle.net/xN6Da/1/

I would recommend removing the IDs and replacing them with a common Class. Currently, every time you add another element. You are going to need to create another ID and add it to the CSS.

Upvotes: 2

jfkelley
jfkelley

Reputation: 83

If your asking how to change style rules via Javascript, this is the code I use:

//* Function: putClassAttrib((myclass,myatt,myval)
//* Purpose: Add/modify a rule in a given class
putClassAttrib = function(myclass,myatt,myval) {
  // e.g. putClassAttrib(".hideme","whiteSpace","nowrap")
  var myrules;  
  if (document.all) {
    myrules = 'rules';
    }
  else if (document.getElementById) {
    myrules = 'cssRules';
    }
  else {
    return "Prototype warning: no style rules changer for this browser"
    }
  for (var i=0;i<document.styleSheets.length;i++){
    for (var j=0;j<document.styleSheets[i][myrules].length;j++) {
      if (document.styleSheets[i][myrules][j].selectorText == myclass) {
        document.styleSheets[i][myrules][j].style[myatt] = myval;
        }
      }
    }
  return ""; 
  }

(notice, I am an unrepentant advocate of banner style indenting ;-)... http://en.wikipedia.org/wiki/Indent_style#Banner_style

Upvotes: -1

Related Questions