javascriptを使用してCSSクラス全体のスタイルを変更する

javascriptを使用してCSSクラスの属性を変更する方法はありますか？javascriptを使用してCSSクラス全体のスタイルを変更する

<style type="text/css"> 
    .fool select { 
    display: block; 
    } 
</style> 

<p class="fool"> 
    <select id="a" onchange="changeCSS()"> ... </select> 
    <select id="b" > ... </select> 
    <select id="c" > ... </select> 
</p>

私は表示を変更したい：ディスプレイへのブロック：ユーザー・コール機能changeCSS（後にすべての<select>要素用なし）。

<style type="text/css"> 
    .fool select { 
    display: block; 
    } 
    .foolnone select { 
    display: none; 
    } 
</style>

と<p>のクラスを変更：同じ効果を得るために、あなたは別のスタイルを作ることができ

出典

2012-02-05 Bedo

http://stackoverflow.com/questions/622122/how-can-i-change-the-cssの可能性の重複が-class-rules-using-jquery – j08691

@ j08691：いいえ、その問題は** jQuery **です。これはあなたがそのライブラリの使用を前提としていません。 –

このサイトをご覧ください。http://quirksmode.org/dom/w3c_css.html – Michas

キーが追加クラスとのための余分なルールを定義することです指定されたスタイルルールのルールを書き換えるのではなく、これらのクラスを要素にddします。

function changeCSS() { 
    var selects = document.getElementsByTagName("select"); 
    for(var i =0, il = selects.length;i<il;i++){ 
    selects[i].className += " hidden"; 
    } 
}

CSS

.fool select.hidden, select.hidden { 
    display: none; 
}

それとも本当に効率的な方法のために（あまりにもいくつかのより具体的なスタイル規則が必要な場合があります）

function changeCSS() { 
    document.getElementsByTagName("body")[0].className += " hideAllSelects" 
}

CSS

body.hideAllSelects select { 
    display: none; 
}

出典

2012-02-05 22:46:34 wheresrhys

ありがとう！これは私のために働きます： varは= document.getElementsByTagName（ "選択"）を選択します; for（var i = 0、il = selects.length; i Bedo

それは簡単に見えますが、私はこれを行うための方法を見つけることができません... foolnone。

そうしないと、あなたは<p>の子供のそれぞれを通過し、クラスを変更する必要があると思います。それがあなたが行きたいと思う方法であれば、たぶん、jqueryのようないくつかのライブラリを使うのが一番良いかもしれません。すなわち、全体<p>と隠ぺいを隠して（これは、上記のアプローチの両方を示して

http://jsfiddle.net/3ujau/1/

：作業例については、このjsfiddleを参照してください

<style> 
.fool select.displaynone { 
    display: none 
} 

$('.fool>select').toggleClass('displaynone')

：それを、あなたのような何かを行うことができます<select> Sのそれぞれは。

出典

2012-02-05 22:36:47

私はいつも別のクラスを追加し、既存のクラス "ばか"としてクラスを変更するのではなく、より長いセレクタを使用して別のスタイルルールを定義することができます他のものにも使用されており、完全に削除することは安全ではないかもしれません。 – wheresrhys

@wheresrhys完全に同意します - 私が追加した例を見てください。これは 'displaynone'クラスを追加します。しかし、あなたのプロジェクトに合うものは、あなたが考えることができるものですが、これは基本的に使用できるものでなければなりません。 –

-1

for(var elements = document.getElementsByTagName('select'), i = elements.length; i--) 
    elements[i].style.display = "none";

出典

2012-02-05 22:49:50 Gabe

"{"を "i = ..."の前に ";"で置き換えることもできません。これはエラーです： "キャッチされていないTypeError：未定義のプロパティ 'スタイル'を読み取れません" – Bedo

あなたはスタイルのルールを変更することができますが、それは通常、最良の設計上の決定ではありません。

スタイルシートで定義されたスタイルルールにアクセスするには、document.styleSheetsコレクションにアクセスします。そのコレクションの各エントリは、ブラウザに応じてcssRulesまたはrulesと呼ばれるプロパティを持ちます。 のそれぞれは、CSSRuleインスタンスになります。ルールを変更するには、cssTextプロパティを変更します。

しかし、再び、それはおそらく問題を解決する最良の方法はありません。しかしそれはあなたの質問に対する文字通りの答えです。

問題を解決する最良の方法は、以前のルールの設定を上書きしてスタイルシートに追加し、そのクラスをselect要素またはそのコンテナに追加することです。

.fool select { 
    display: block; 
} 
.fool.bar select { 
    display: none; 
}

を...そしてあなたが選択を非表示にしたいとき、"fool"クラスを持つコンテナに"bar"クラスを追加：だから例えば、あなたがルールを持つことができます。

また、要素に直接CSSスタイル情報を適用します。

出典

2012-02-05 22:51:47

変更するクラスには多数の要素がありますが、要素を1つずつ変更するよりもはるかに高速です（これはセレクタベースの関数で行う必要があります）。 – RobG

Perfect good answer - それはほとんどが最良の決定ではないが、哲学的な理由で何かを禁じようとするのではなく、必要であればこれを行う方法を説明する。 DOMのオブジェクトがたくさんあり、クラスを変更すると（ブラウザのC++コードにハードカウントをさせる）、クラスセレクタで要素をループするようになり、 JSからの作品）。 – peterh

@peterh：ええと、これを試した最後の時間（数週間前、別の質問に答えようとしていましたが）は、ルールが読み込み専用になったようです。私はそれをフォローアップする時間がなかった... –

divクラスの高さを同時に調整するには、CSSクラスに直接アクセスしています。

function cssrules(){ 
    var rules={}; var ds=document.styleSheets,dsl=ds.length; 
    for (var i=0;i<dsl;++i){ 
    var dsi=ds[i].cssRules,dsil=dsi.length; 
    for (var j=0;j<dsil;++j) rules[dsi[j].selectorText]=dsi[j]; 
    } 
    return rules; 
}; 
function css_getclass(name,createifnotfound){ 
    var rules=cssrules(); 
    if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case'; 
    return rules[name]; 
};

、その後、あなたはcss_getclass('.classname').style.background="blue"ような何かを行うことができます。これは、私はそれをやっている方法です。私は窓のクロームでこれを試しただけで、他のブラウザではうまくいった。

出典

2013-01-10 01:02:06 amwinter

これは、ファイヤーフォックス21、オペラ12.12と10同様にうまくいきました。より精巧なセレクタルールも機能します。 'dsi = ds [i] .cssRules'を' dsi = ds 'に変更する必要があることに注意してください。 'cs_getclass（' td：first-child a img '）。style.width = this.value +" em ";' – Stephen

[i] .cssRules || ds [i] .rules'を使用し、前のstyleSheetに同じselectorTextが存在する場合、関数がルールを上書きすることに注意してください。 – aMarCruz

ここで私はそれを行うだろう方法は次のとおりです。

//Broken up into multiple lines for your convenience 
 
setTimeout 
 
(
 
    function() 
 
    { 
 
    document.getElementById('style').innerHTML = 'p.myclass{display: none}'; 
 
    }, 5000 
 
);

<!--Should this be separated into "<head>"?--> 
 
<style id="style"></style> 
 

 
<p>After 5 seconds:</p> 
 
<p>This text won't be hidden,</p> 
 
<p class="myclass">But this will,</p> 
 
<p class="myclass">And so will this.</p> 
 

 
<script> 
 
\t style = document.getElementById('style'); 
 
\t setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000); 
 
</script>

出典

2017-05-19 10:16:20 FluorescentGreen5

javascriptを使用してCSSクラス全体のスタイルを変更する

答えて

関連する問題