特定の要素にだけスタイルを追加するjavascriptのサンプルをください。


<div id="wrap">
<div class="box"></div>  ←ここだけ
</div>
<div id="block">
<div class="box"></div>
<div class="box"></div>
</div>

上記の1つ目の<div class="box"></div>にだけ、padding-bottom=10pxを適用するjavascriptのサンプルをください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/22 19:09:27
  • 終了:2013/08/29 19:10:06

ベストアンサー

id:a-kuma3 No.4

a-kuma3回答回数4545ベストアンサー獲得回数18952013/08/22 21:18:43

ポイント20pt

対象となる class="box" の親要素が id="wrap" であることに着目。

jQuery を使わない場合。

    var e_wrap = document.getElementById("wrap");
    var e_box = e_wrap.getElementsByClassName("box");
             /* ↑DOM 要素に対して、メソッドを使うと、その子要素だけに限定できる */

    e_box[0].style.paddingBottom = "10px";

getElementsByClassName は、最近のブラウザだと実装されてますけど、ちょっと古いブラウザ(例えば IE8 とか)だと実装されていないことに要注意。


jQuery を使った場合。

    $("#wrap > .box").css("padding-bottom", "10px");
他1件のコメントを見る
id:a-kuma3

そうなんす。
ただ、jQuery でクラス指定をした場合、全ての要素をスキャンして指定したクラスを持つ要素を拾い出すので、ちょっと重たいです。
手軽さと、処理の重さのバランスを考えて使う必要があります。

2013/08/25 22:10:13
id:maimainet

なるほど、奥が深いんですね。今まで無理と思ってたことがJSで簡単に解決できると分かって勉強になりました!ありがとうございました。

2013/08/29 19:44:30

その他の回答(4件)

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/08/22 19:44:35

ポイント20pt

javascriptを使用しなくてもcssで十分だと思います

.box:first-child {
padding-bottom=10px;
}

http://weboook.blog22.fc2.com/blog-entry-268.html

id:maimainet

cssは分かりますが、今回欲しいのはjavascriptのサンプルです。paddingの数値がランダムになるので。

2013/08/22 19:49:48
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492013/08/22 20:26:09

ポイント20pt

jQueryなどを使わない例

<html>
<head>
    <style>
       div { background-color: green; }
       .box { padding-bottom: 50px; }
    </style>
    <script type="text/javascript">
        function sub1() {
            var e = document.getElementsByClassName("box");
            e[0].style.color = 'white';
            e[0].style.paddingBottom = '10px';
        }
    </script>
</head>
<body onLoad="sub1()">
    <div id="wrap">
        <div class="box">ここだけ</div>
    </div>
    <div id="block">
        <div class="box">ここはちがうよ</div>
        <div class="box">ここはちがうよ</div>
    </div>
</body>
</html>

jQueryを使った例

<html>
<head>
    <style>
       div { background-color: green; }
       .box { padding-bottom: 50px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>          

  <script type="text/javascript">
        $(function() {
            $(".box:first").css("color", "white");
            $(".box:first").css("padding-bottom", "10px");
        });
    </script>
</head>
<body>
    <div id="wrap">
        <div class="box">ここだけ</div>
    </div>
    <div id="block">
        <div class="box">ここはちがうよ</div>
        <div class="box">ここはちがうよ</div>
    </div>
</body>
</html>
id:maimainet

jQueryを使用することもできるんですね。勉強になりました、ありがとうございます!

2013/08/25 21:58:12
id:dawakaki No.3

だわかき回答回数797ベストアンサー獲得回数1222013/08/22 21:16:31

ポイント20pt

JavaScriptによるスタイルシート(CSS)の操作
http://ash.jp/web/css/js_style.htm

id:maimainet

教えて頂いたURLには今回の質問を直接解決できる方法は見つけられませんでしたが、サンプルとして大変参考になりました。ありがとうございます。

2013/08/25 21:59:41
id:a-kuma3 No.4

a-kuma3回答回数4545ベストアンサー獲得回数18952013/08/22 21:18:43ここでベストアンサー

ポイント20pt

対象となる class="box" の親要素が id="wrap" であることに着目。

jQuery を使わない場合。

    var e_wrap = document.getElementById("wrap");
    var e_box = e_wrap.getElementsByClassName("box");
             /* ↑DOM 要素に対して、メソッドを使うと、その子要素だけに限定できる */

    e_box[0].style.paddingBottom = "10px";

getElementsByClassName は、最近のブラウザだと実装されてますけど、ちょっと古いブラウザ(例えば IE8 とか)だと実装されていないことに要注意。


jQuery を使った場合。

    $("#wrap > .box").css("padding-bottom", "10px");
他1件のコメントを見る
id:a-kuma3

そうなんす。
ただ、jQuery でクラス指定をした場合、全ての要素をスキャンして指定したクラスを持つ要素を拾い出すので、ちょっと重たいです。
手軽さと、処理の重さのバランスを考えて使う必要があります。

2013/08/25 22:10:13
id:maimainet

なるほど、奥が深いんですね。今まで無理と思ってたことがJSで簡単に解決できると分かって勉強になりました!ありがとうございました。

2013/08/29 19:44:30
id:u_7cc No.5

7cc回答回数32ベストアンサー獲得回数142013/08/27 12:56:56

ポイント20pt

IE8以上が対象でクラスによる指定がしたいなら、getElementsByClassNameの代わりにquerySelector, querySelectorAllというのが使えます。

var el = document.getElementById("wrap"), 
    target = el.querySelector(".box")

target.style.paddingBottom = "10px"


IE7以下も対応するなら以下のようになります

var el = document.getElementById("wrap"), 
    childs = el.childNodes

for(var i=0; i<childs.length; i++){
  if(  childs[i].className === "box" ){
    childs[i].style.paddingBottom = "10px" // ここでスタイルを設定する
  }
}
id:maimainet

いろんな方法があるんですね、JSを勉強したくなりました。ありがとうございます!

2013/08/29 19:43:24

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません