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
– Caleb Doucet, Commented Oct 12, 2012 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
– Dash, Commented Oct 12, 2012 at 17:41

Community · Accepted Answer · 2017-05-23 12:30:11Z

3

Remove the css class from the elements.

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Oct 12, 2012 at 15:11

Collin Price

5,8803 gold badges36 silver badges36 bronze badges

How do you restore the class later?

BryanH
– BryanH

10/12/2012 15:17:43
Commented Oct 12, 2012 at 15:17
addClass, I guess. But what do I call the class? ".hover"? I don't totally get how identifiers work.

Dash
– Dash

10/12/2012 15:25:58
Commented Oct 12, 2012 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
– Caleb Doucet

10/15/2012 12:25:34
Commented Oct 15, 2012 at 12:25

Add a comment |

Niet the Dark Absol · Accepted Answer · 2012-10-12 15:11:36Z

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, 2012 at 15:11

Niet the Dark Absol

325k85 gold badges478 silver badges603 bronze badges

Add a comment |

BryanH · Accepted Answer · 2012-10-12 15:14:20Z

0

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.

answered Oct 12, 2012 at 15:14

BryanH

6,0683 gold badges36 silver badges47 bronze badges

Add a comment |

wavetree · Accepted Answer · 2012-10-12 15:16:32Z

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');

Collectives™ on Stack Overflow

How to "comment out" CSS code from JavaScript?

4 Answers 4

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Linked

Related