javascript - CSS セレクターのオン/オフ

Question

たとえば、次の CSS ルールがあります。

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

および次の HTML で、JS 関数を呼び出します。

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

turnItsCSS()テーブルの CSS ルールを切り替えることは可能ですか?

私が考えたのはで解析innerHTMLするdocument headことだけですが、それでは十分ではないようです。

score 0 · Accepted Answer

これは、cssファイルを切り替えるための優れた方法です。

<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 · Accepted Answer

jQuery または JavaScript を使用して、JavaScript でオブジェクトのスタイルを動的に変更できます ID またはクラス名で要素を取得し、スタイルを設定できます

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

また

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

score 0 · Accepted Answer

.addClass()jQuery では、または.removeClass()(または、より簡単には.toggleClass()関数)を使用できます。

だから、あなたがテーブルを持っているとしましょう：

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

そして、次の CSS があります。

.table_red {
    color: red;
}

あなたのjQueryでは、次のことができます：

$("#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.
});

score 0 · Accepted Answer

HTML5 を使用した例を次に示します。残念ながら、IE10 未満ではサポートされていないと思います。

HTML

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

CSS

.on { 
    background-color:red;
}

http://jsfiddle.net/sGKgV/

他のテクニックの詳細については、https: //stackoverflow.com/a/196038/1156119 をご覧ください。

javascript - CSS セレクターのオン/オフ

4 に答える 4

Related

Reference