CSS triangle changing display value with Javascript

Question

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

Pseudo elements (the css-generated ::before and ::after) are presentation-only, and are not (currently at least) available within the DOM. To adjust the styles you'd need to access the style rules in which the properties are defined and change those. Or add a class to the 'parent' element, and use that class to influence the colour. — David Thomas
– David Thomas, Commented May 18, 2013 at 15:55
Add/remove a class and do it with a CSS rule; it's extremely easy. Your CSS would be simpler if you gave your slides a common class, so you wouldn't have to list out the "id" values. — Pointy
– Pointy, Commented May 18, 2013 at 16:06

Taylor Hakes · Accepted Answer · 2013-05-18 16:10:42Z

2

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.

edited May 18, 2013 at 16:10

answered May 18, 2013 at 16:03

Taylor Hakes

6167 silver badges12 bronze badges

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

3 Comments

Pointy Over a year ago

You posted a link to the original jsfiddle.

Kyrbi Over a year ago

jsfiddle.net/xN6Da/2 I have finished this. Would you mind telling me how to remove that class again? Thank you.

Taylor Hakes Over a year ago

You just need to do something like this. document.getElementById("slideM1").className=""; Setting the className to an empty string.

jfkelley · Accepted Answer · 2013-05-18 16:04:22Z

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

Collectives™ on Stack Overflow

CSS triangle changing display value with Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related