JavascriptでCSS(width)を書き換えたいです

Question

JavascriptでCSSを書き換える

現在、Javascriptの勉強を兼ねてchrome拡張機能にの開発に取り組んでいます。
特定のページに表示されているtableレイアウトのwidthを100%に変更し、
ページを見やすくする機能を作っていこうと思っているのですが、
CSSソースを確認するとIDとクラスを一つに省略して記述してありました。

getElementsByidやgetElementsByclassnameで要素を抽出できるのはわかりましたが
両方に該当する場合はどのような書き方をすればいいでしょう？

教えていただけると幸いです。

該当のソースコード

#aaa .bbb{
 width: 800px;
}

window.onload = function() {
 var body = document.getElementsByClassName('bbb');
  body[0].style.width = '100%';
};

試したこと

上記JSにてclassを抽出、指定することで一部の対象はwidthが100%になりました

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[akihiro3]

全ての.bbbをwidth:100%にしたいという事ですか？

[sheep0808]

そうです!
説明不足ですみません。

Answer 1

forEachを使えばいいのですが、
HTMLCollectionになるので配列にする必要があります。

body = Array.from( body );
body.forEach(function(e) {
  e.style.width = '100%';
});

もしくは、

Array.prototype.forEach.call(body, function(e) {
  e.style.width = '100%';
});

要素の取得にquerySelectorを使えばそのままforEachが使えます。

var body = document.querySelectorAll('.bbb');
body.forEach(function(e) {
  e.style.width = '100%';
});

###追記

#aaaかつ.bodyの指定をもし考えているのならば、同じページ内にidは複数使えないので、
idだけでいいと思います。
必要ならば.bodyは別途記述です。

  var body = document.getElementsByClassName('body');
  var aaa = document.getElementById('aaa');

  aaa.style.width = '100%';

  Array.prototype.forEach.call(body, function(e) {
    e.style.width = '100%';
  });

Answer 2

両方に該当する場合はどのような書き方をすればいいでしょう？

idとclassの両方を指定したいのならquerySelectorが有効です。

// id="aaa"でclass="bbb"を取得
document.querySelector('#aaa.bbb')

今回は対象が複数あるようなのでquerySelectorAllを利用しましょう。

document.querySelectorAll('#aaa.bbb')