QA@IT
«回答へ戻る

元の回答部分に見出しタグ設定

5619
 以下の様に styleオブジェクトを使用しても指定することができます。
+
+#### styleオブジェクトを使用
 ```javascript
 var wrapper = document.getElementById("wrapper");
 var hoge = wrapper.getElementsByClassName("hoge");

以下の様に 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>";
}

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

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

#### styleオブジェクトを使用
```javascript
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とは表記が異なる書き方になる場合があるので注意してください。
```javascript
    hoge[i].style.backgroundColor="red";
    // CSS では background-color
```

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

#### styleSheetオブジェクトにルールを追加する
※ IEだとaddRuleだったかな。
```javascript
var s = document.styleSheets[0];
s.insertRule(".hoge { height: 30px}");
```

#### style エレメントを追加してしまう
```javascript
var s = document.createElement('style')
s.innerHTML = ".hoge {height: 30px;}";
document.body.appendChild(s);
```

#### クラスを用意しておいて classNameを変更する
※ IE6だと複数クラス指定時の getElementsByClassNameの問題があるので注意
```css
.hoge:nth-child(2n) {
    background: lime;
}
.height30 {
    height: 30px;
}
```
```javascript
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";
}
```

#### タグそのものを書き換える
```javascript
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>";
}
```

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

別の方法を追加

5619
     hoge[i].style.backgroundColor="red";
     // CSS では background-color
 ```
+
+### 追記
+いろいろな手段を見たいという質問だったのかな?と勝手に思いましたので、追記してみました。
+
+#### styleSheetオブジェクトにルールを追加する
+※ IEだとaddRuleだったかな。
+```javascript
+var s = document.styleSheets[0];
+s.insertRule(".hoge { height: 30px}");
+```
+
+#### style エレメントを追加してしまう
+```javascript
+var s = document.createElement('style')
+s.innerHTML = ".hoge {height: 30px;}";
+document.body.appendChild(s);
+```
+
+#### クラスを用意しておいて classNameを変更する
+※ IE6だと複数クラス指定時の getElementsByClassNameの問題があるので注意
+```css
+.hoge:nth-child(2n) {
+    background: lime;
+}
+.height30 {
+    height: 30px;
+}
+```
+```javascript
+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";
+}
+```
+
+#### タグそのものを書き換える
+```javascript
+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>";
+}
+```
+
+などもあります。
+まだあるかもしれません。

以下の様に 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>";
}

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

以下の様に styleオブジェクトを使用しても指定することができます。
```javascript
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とは表記が異なる書き方になる場合があるので注意してください。
```javascript
    hoge[i].style.backgroundColor="red";
    // CSS では background-color
```

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

#### styleSheetオブジェクトにルールを追加する
※ IEだとaddRuleだったかな。
```javascript
var s = document.styleSheets[0];
s.insertRule(".hoge { height: 30px}");
```

#### style エレメントを追加してしまう
```javascript
var s = document.createElement('style')
s.innerHTML = ".hoge {height: 30px;}";
document.body.appendChild(s);
```

#### クラスを用意しておいて classNameを変更する
※ IE6だと複数クラス指定時の getElementsByClassNameの問題があるので注意
```css
.hoge:nth-child(2n) {
    background: lime;
}
.height30 {
    height: 30px;
}
```
```javascript
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";
}
```

#### タグそのものを書き換える
```javascript
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>";
}
```

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

回答を投稿

以下の様に 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
以下の様に styleオブジェクトを使用しても指定することができます。
```javascript
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とは表記が異なる書き方になる場合があるので注意してください。
```javascript
    hoge[i].style.backgroundColor="red";
    // CSS では background-color
```