web-dev-qa-db-ja.com

getElementByIdを使用してJavaScriptでCSSを変更する

Javascriptを使用して特定のCSSにアクセスする方法がわかりません。

私たちに言わせてください、

#menu { color: red; }

からアクセスできます

document.getElementById('menu').style.color = "blue";

でもアクセスしたい

#menu li a { height: 10%; }

Document.getElementById（）を使用してそれにアクセスするにはどうすればよいですか？

javascripthtmlcssgetelementbyid
8
LINGS

プレーンJavaScriptソリューション：

この場合、getElementById()はID属性のクエリのみを目的としているため使用できませんが、_#menu_のコンテキストで getElementsByTagName() を使用できます。

_var m = document.getElementById('menu');
// Get all <li> children of #menu
var lis = m.getElementsByTagName('li');
// Loop over them
for (var i=0; i<lis.length; i++) {
  // Get all <a> children of each <li>
  var atags = lis[i].getElementsByTagName('a');
  for (var a = 0; a<atags.length; a++) {
    // And set their color in a loop.
    atags[a].style.color = 'blue';
    // or change some other property
    atags[a].style.height = '25%'; 
  }
}
_

jQueryソリューション：

JQueryを使用できる場合、これは非常に簡単になります。

_$('#menu li a').css('color', 'blue');
_
10
Michael Berkowski

あなたはしません。その基準に一致するすべての_<a>_タグを見つける必要があります。

.getElementById()関数は、一意の「id」文字列によって要素を取得することを目的としています。それ以外の方法で要素を取得する必要がある場合は、使用する他のAPIがあります：.getElementsByTagName()、.getElementsByClass()、.querySelectorAll()など。ブラウザのサポートはさまざまで、.getElementById()はIEと他のブラウザでは異なります。

2
Pointy