人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

特定の要素にだけスタイルを追加する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のサンプルをください。

●質問者: maimainet
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● holoholobird
●20ポイント

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

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

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


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

2 ● うぃんど
●20ポイント

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>

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

3 ● だわかき
●20ポイント

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


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

4 ● a-kuma3
●20ポイント ベストアンサー

対象となる 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");

maimainetさんのコメント
他の方の回答にもありましたが、getElementsByClassNameというものがあると知って喜んだのは束の間、IE8では使えないんですね。残念でしたが、jQueryを使った方法で解決できそうです。ありがとうございます!

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

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

5 ● 7cc
●20ポイント

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" // ここでスタイルを設定する
 }
}

maimainetさんのコメント
いろんな方法があるんですね、JSを勉強したくなりました。ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ