How to "comment out" CSS code from JavaScript?

Question

Obviously one can't actually comment out the code, but, how, from JavaScript, do I make the following piece of CSS seems as if it were commented out? How do I uncomment it after?

.box:hover div.innercontent {

    -webkit-transform: perspective(3000) translateZ(200px);

    -moz-transform: scale(1.1);
    -moz-perspective: 3000px;

    transform: perspective(3000) translateZ(200px) ;
    z-index: 90;

    box-shadow:0 0 35px 5px black;
}

.box:hover div.innerlabel {

    -webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);

    -moz-transform: rotateX(5deg) scale(1.1);
    -moz-perspective: 500px;

    transform: perspective(500) rotateX(5deg) translateZ(60px);

    box-shadow:0 0 20px 8px white; 
    z-index: 100;
}

.box:hover div.labelwrapper {

    z-index: 100;
}

Thanks

So you want to not use the css but have it display in something like firebug? What is your reason for wanting to comment the css? — Caleb Doucet, Oct 12 '12 at 15:11
Caleb - this CSS creates a bug at a certain point in the web application. I need to deactivate this CSS script for that portion, and reactivate it when it is over, from JavaScript. — Dash, Oct 12 '12 at 17:41

score 3 · Accepted Answer · edited May 23 '17 at 12:30

3

Remove the css class from the elements.

You can either use jQuery or this other stackoverflow question to accomplish this.

edited May 23 '17 at 12:30

Community

1
1

answered Oct 12 '12 at 15:11

Collin Price

5,620
3
33
35

How do you restore the class later? – BryanH Oct 12 '12 at 15:17
addClass, I guess. But what do I call the class? ".hover"? I don't totally get how identifiers work. – Dash Oct 12 '12 at 15:25
@user1710817 I don't think Collin is referring to the addClass method that jQuery uses but rather the removeClass. I'm not completely sure which class you want to remove but if it is .box then `$(".box").removeClass("box");` might do the trick. – Caleb Doucet Oct 15 '12 at 12:25

score 3 · Answer 2 · answered Oct 12 '12 at 15:11

3

If the CSS makes up the entirity of a CSS file, you can set the disabled attribute on the <link/> element to disable all the styles defined in it. This is probably the easiest way, especially when dealing with :hover styles.

answered Oct 12 '12 at 15:11

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 3 · answered Oct 12 '12 at 15:14

I'll show you how to do one and you can use the same technique for the others:

$(".innercontent")
   .addClass('.innercontent-dummy')
   .removeClass('.innercontent');

Then to restore

$(".innercontent-dummy")
  .addClass('.innercontent')
  .removeClass('.innercontent-dummy');

The 'dummy' class doesn't have to have any formatting; you just need it as a placeholder to find the element if you want to restore the original class.

score 0 · Answer 4 · answered Oct 12 '12 at 15:16

I use a modifier class, like "active," to toggle the on-off state of elements. Bootstrap does this with menus and other elements as well.

For example:

CSS:

.box.active:hover div.innercontent {
    -webkit-transform: perspective(3000) translateZ(200px);
    -moz-transform: scale(1.1);
    -moz-perspective: 3000px;
    transform: perspective(3000) translateZ(200px) ;
    z-index: 90;
    box-shadow:0 0 35px 5px black;
}
.box.active:hover div.innerlabel {
    -webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);
    -moz-transform: rotateX(5deg) scale(1.1);
    -moz-perspective: 500px;
    transform: perspective(500) rotateX(5deg) translateZ(60px);
    box-shadow:0 0 20px 8px white; 
    z-index: 100;
}
.box.active:hover div.labelwrapper {
    z-index: 100;
}

JavaScript:

$('.box').toggleClass('active');

How to "comment out" CSS code from JavaScript?

4 Answers4