on/off for css selectors

Question

I have, for example, this CSS rules:

<style>
table {background:red;}
div {background:green;}
</style>

and the following HTML, calling a JS function:

<table onclick="turnItsCSS(on/off)"><tr><td>123</td></tr></table>

Is it possible for turnItsCSS() to toggle CSS rules for tables?

All I figured is to parse innerHTML in document head, but it doesn't seem to be sufficient.

I would recommend using classes instead of elements in your CSS rules. Then switching is a simple matter of toggling classes. — Frédéric Hamidi, Feb 12 '13 at 00:11
possible duplicate of [Changing a CSS rule-set from Javascript](http://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript) — Quentin, Feb 12 '13 at 00:12
I don't think you can 'disable' css, other than removing/changing it. I could be wrong. — kennypu, Feb 12 '13 at 00:12
@Frédéric Hamidi, yeah, Frederic, I know, but I need to do subject for any selector in — el Dude, Feb 12 '13 at 00:14

score 0 · Answer 1 · edited Feb 12 '13 at 00:23

0

In jQuery you can use the .addClass() or .removeClass() (or more simply, the .toggleClass() function)

So, say you have a table:

<a href="#" id="addClass">Add CSS</a>
<table id="the_table">
    <tr>
        <td>Hello, World</td>
    </tr>
</table>

And you have the following CSS:

.table_red {
    color: red;
}

In your jQuery, you could have:

$("#addClass").click(function() {
    $("#the_table").addClass(".table_red");

    // Check if the class is active, and remove it for a toggle.
    // or use the .toggleClass() function.
});

edited Feb 12 '13 at 00:23

Dennis

32,200
11
64
79

answered Feb 12 '13 at 00:11

Julio

2,261
4
30
56

I need pure html/js, and I think JQ's .addClass etc - that thing parses document.head part =) – el Dude Feb 12 '13 at 00:13
And, what's wrong with jQuery in this instance? Its trivial to solve your problem with it. – Julio Feb 12 '13 at 00:17
I need to do subject for any selector in – el Dude Feb 12 '13 at 00:19
I'm still not quite certain why you can't use jQuery. – Julio Feb 12 '13 at 00:20

score 0 · Answer 2 · answered Feb 12 '13 at 00:17

This is a nice way to switching between css files:

<button onclick="$('[rel=stylesheet]').attr('href','http://www.example.com/css/menu_red.css')">red</button>

<button onclick="$('[rel=stylesheet]').attr('href','http://www.example.com/css/menu_black.css')">black</button>

score 0 · Answer 3 · answered Feb 12 '13 at 00:25

0

you can use jQuery or JavaScript to change dynamically your objects style in JavaScript you can get element by id or class name and set style

var obj = getElementById("idName");
obj.style.width = "300px";

or

var obj = getElementsByClassName("classname")[0]; //return array with with all elements with same class
obj.style.width = "300px";

answered Feb 12 '13 at 00:25

ser savv

21
1
2

Thanx, but I need to disable selectors without altering element's property. – el Dude Feb 12 '13 at 01:02

score 0 · Answer 4 · edited May 23 '17 at 12:18

0

Here's an example using HTML5, unfortunately i don't think it's supported in < IE10.

HTML

<table onclick="this.classList.toggle('on');"><tr><td>123</td></tr></table>

CSS

.on { 
    background-color:red;
}

http://jsfiddle.net/sGKgV/

Check out https://stackoverflow.com/a/196038/1156119 for a thorough rundown of other techniques.

edited May 23 '17 at 12:18

Community

1
1

answered Feb 12 '13 at 00:25

Daniel Imms

47,944
19
150
166

on/off for css selectors

4 Answers4