如何从JavaScript中“注释” CSS代码？

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

Answer 1

Remove the css class from the elements.

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

Answer 2

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.

Answer 3

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.

Answer 4

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