QA@IT

classに対してJavaScript(jQueryとCSSなし)で高さを指定する方法

11523 PV

classに対してJavaScript(jQueryとCSSなし)で高さを指定したいのですが
setAttributeを使用する以外に指定する方法はありますか?

<div id="wrapper">
    <div class="hoge">hoge</div>
    <div class="hoge">hoge</div>
    <div class="hoge">hoge</div>
</div>
<script>
var wrapper = document.getElementById("wrapper");
var hoge = wrapper.getElementsByClassName("hoge");

for(var i=0, l=hoge.length; i<l; i++){
    hoge[i].setAttribute("style", "height:50px");
}
</script>

##jsFiddleサンプル
http://jsfiddle.net/iwbjp/Y4dQY/

回答

以下の様に styleオブジェクトを使用しても指定することができます。

styleオブジェクトを使用

var wrapper = document.getElementById("wrapper");
var hoge = wrapper.getElementsByClassName("hoge");

for(var i=0, l=hoge.length; i<l; i++){
    hoge[i].style.height="50px";
}

ただし、javascriptの文法上一部CSSとは表記が異なる書き方になる場合があるので注意してください。

    hoge[i].style.backgroundColor="red";
    // CSS では background-color

追記

いろいろな手段を見たいという質問だったのかな?と勝手に思いましたので、追記してみました。

styleSheetオブジェクトにルールを追加する

※ IEだとaddRuleだったかな。

var s = document.styleSheets[0];
s.insertRule(".hoge { height: 30px}");

style エレメントを追加してしまう

var s = document.createElement('style')
s.innerHTML = ".hoge {height: 30px;}";
document.body.appendChild(s);

クラスを用意しておいて classNameを変更する

※ IE6だと複数クラス指定時の getElementsByClassNameの問題があるので注意

.hoge:nth-child(2n) {
    background: lime;
}
.height30 {
    height: 30px;
}
var wrapper = document.getElementById("wrapper");
var hoge = wrapper.getElementsByClassName("hoge");

for(var i=0, l=hoge.length; i<l; i++){
    hoge[i].className="hoge height30";
}

タグそのものを書き換える

var wrapper = document.getElementById("wrapper");
var hoge = wrapper.getElementsByClassName("hoge");

for(var i=0, l=hoge.length; i<l; i++){
    hoge[i].outerHTML="<div class='hoge' style='height:30px'>" + hoge[i].innerHTML + "</div>";
}

などもあります。
まだあるかもしれません。

編集 履歴 (2)
  • styleオブジェクトで指定する方法ですね。
    こちらの書き方のほうがスッキリしていて
    見やすいですね。
    -
  • いろいろな手段を知りたいということですかね?あといくつか追記します。 -

追記していただきありがとうございました。
insertRuleなどは知らなかったので勉強になりました。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。