web-dev-qa-db-ja.com

javascript-クラスのスタイルを変更する

私はしばらくjQueryを使用してきましたが、今は純粋なJavaScriptで何かを書きたいと思っていますが、それはやりがいがあります。現在、私の最大の問題の1つは、設定/変更する方法を見つけられなかったことです。クラスのスタイリング。これはidを持つ要素の問題ではありませんが、idを持つ1つの要素だけでなく、同じクラスを持つ要素のグループのスタイルを変更したいと思います。jQueryでは、次のように記述します。

$('.someClass').css('color','red')

純粋なjsでこれに単純な同等性は本当にありませんか？

javascriptjquerycssclass
15
user1231410

以下をお試しください

var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
  all[i].style.color = 'red';
}

注：Cheeryが指摘したように、getElementsByClassNameはIEでは機能しません。リンクされた質問には、この制限を回避する良い方法があります

21
JaredPar
var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
  all[i].className += " red"; 
}

より良いコーディングスタイルを得るには、上記のコードを使用して要素に別のクラスを追加し、CSSを使用して次のようにすべての要素の色を変更します。

.red {
  color:red;
}
3
Kefi

Sizzle： http://sizzlejs.com/ などのセレクターライブラリを使用できますが、純粋なJSが必要な場合は、すべての要素を取得して、プログラムで「手摘み」していると思います。たとえば、次のようにRegExを使用したいクラス：

これはJQueryワンライナーと同等です：

for( i in document.all) document.all[i].className && /\bpost-text\b/g.test(document.all[i].className) && (document.all[i].style.color = "red")

：）

1行で必要ない場合は、より速くすることができます（、はるかに読みやすくします）：

var myClassName = "someClass";
var regexp  = RegExp("\\b"+myClassName+"\\b/g");
var elements = document.all;
for( i in elements){
  var this_element = elements[i];
  if(regexp.test(this_element.className){
    this_element.style.color = "red";
  }
}

"for（i in object）"が機能しない場合は、クラシックforループ "forを使用してください（var i = 0; i <elements.length; i ++） "。

'beautified'のように、少し高度なJSの概念を使用して（配列関数のマッピング、折りたたみなど ）、コーディングしているJSバージョンは何ですか？ ECMA Script 5ではないようですね。

また、この質問/回答を確認してください 特定のCSSクラスを使用してHTMLドキュメントのすべての要素を取得

1
nana

変更したいのはスタイルシートですね。それはJavascriptで可能です、を参照してください

そのためのライブラリはありません。本当に見たいと思います...

1
Bergi

以下を使用できます。

document.getElementById("MyElement").className = "NewClass";

要素のクラスを変更し、CSSファイルでその新しいクラスのスタイルを定義するだけ

0
jmona789