- ベストアンサー
javascriptでのclass属性変更について教えて下さい。
javascriptでのclass属性変更について教えて下さい。 html上でclass=tripleがあるとして、javascriptでたとえば、color="red"を適応するにはどうすればいいのでしょうか？お解りになるかた、教えてください。 <div class="triple"><p>あ</p></div>
- dream-es
- お礼率100% (7/7)
- JavaScript
- 回答数4
- ありがとう数19
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
あっ！＃３です。その～なんつぅか、また、まちがえた！(^^; （すたいるしーとが１つだけ(?)あることをぜんてい） function addRule( selector, property ) { var s = document.styleSheets[0]; /*@cc_on @if( @_jscript ) s.addRule( selector, property ); @else@*/ s.insertRule( selector + "{" + property + "}", s.cssRules.length );/*@end@*/ }
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
「とんちんかん」とは、いわないで、まずそうぞうしましょう！ むかしは(も)おなじようなものより。 こんなことをしたいの？ ぜんかくくうはくは、はんかくに。 <!DOCTYPE html> <title></title> <style type="text/css"> .triple { font-size:50px; color:blue; } </style> <body> <div class="triple">あ<p>い</p>う</div> <input type="button" value="test" onclick="addRule('.triple','color: red')"> <script type="text/javascript"> function addRule( selector, property ) { document.styleSheets[0]./*@cc_on @if( @_jscript ) addRule( selector, property ); @else@*/ insertRule( selector + "{" + property + "}", s.cssRules.length );/*@end@*/ } </script>
お礼
javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。
- 0909union
- ベストアンサー率39% (325/818)
こういう、とんちんかんの質問にはとんちんかんの回答になよようで？ 日本語になっていません。もう少し聞き方を勉強してください。 HTMLタグ属性の "class"と スタイル属性"style"の子属性である、設定値をイコールで結んでいる。 ツリー構造として、class=styleであり、class≠(イコールでない)colorです。 要は、「class属性の変更」と言っているのにスタイル属性のcolor値の値の変更を例に挙げている。何を聞きたいのかさっぱり分かりません。class属性の値ととsytle属性の値に関係はありません。 まずその辺のDOMを勉強する必要があります。そうでないと、これに回答しても、全く意味がわからないでしょう。 HTMLのCSS（スタイル属性）の上書きについて。 <style>で定義した値は、それぞのタグでのstyle="color:"で上書きします。class=""で設定した値よりもstyle=""で設定した値が優先される事になります。 これをJavaScriptのDOMへのアクセスで言えば、 HTMLオブジェ.class=""は、HTMLオブジェ.style.XXXXで上書きされます。これは実行の順番により左右されます。 HTMLオブジェ.class="" HTMLオブジェ.style.XXXX だと最後に実行されたHTMLオブジェ.style.XXXXが有効になり、上下が逆だと有効も逆です。 このXXXXがcolor="red"になります。分かりましたか？ あなたが以下にとんちんかんな質問をしたかわかりますか？
お礼
javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。
- zeff
- ベストアンサー率69% (137/198)
「具体的にどうしたいのか」がまったくわからないので、 だいたいで思いつく限り書きます。 1.styleを書き換える。 <script type="text/javascript"> <!-- function sample1(id){ document.getElementById(id).style.color ="red"; } // --> </script> </head> <body> <form> <p><input type="button" value="サンプル1" onclick="sample1('box')"></p> </form> <div id="box" class="content">サンプルテキスト</div> </body> </html> 2.classNameを置き換える。 <style type="text/css"> <!-- div.content2{ color:red; } --> </style> <script type="text/javascript"> <!-- function sample2(id){ with( document.getElementById(id) ){ if( className.match( /content/ ) ){ className = className.replace( /\bcontent\b/, 'content2' ); } } } // --> </script> </head> <body> <form> <p><input type="button" value="サンプル2" onclick="sample2('box')"></p> </form> <div id="box" class="content">サンプルテキスト</div> </body> </html> 3.classNameを増やす。 <style type="text/css"> <!-- div.content2{ color:red; } div.content3{ color:blue; } --> </style> <script type="text/javascript"> <!-- function sample3(id){ document.getElementById(id).className ="content content3"; } // --> </script> </head> <body> <form> <p><input type="button" value="サンプル3" onclick="sample3('box')"></p> </form> <div id="box" class="content">サンプルテキスト</div> </body> </html> 4.cssを書き換える。 <style type="text/css"> <!-- div.content{ color:black; } --> </style> <script type="text/javascript"> <!-- function sample4(id){ document.getElementById(id).style.cssText ="color:red"; } // --> </script> </head> <body> <form> <p><input type="button" value="サンプル4" onclick="sample4('box')"></p> </form> <div id="box" class="content">サンプルテキスト</div> </body> </html>
お礼
javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。
お礼
皆様方、javascript初心者の為、大変とんちんかんなご質問ですみません、現在最後にご回答いただきました方の欄にて皆様方に、おわび申し上げます。皆様方のご回答を参考にさせていただきます。なお、私が実行したいことについてですが、html上で<div class="triple">を何度が使用するにあたり、各<div class="triple">をそれぞれ順に<div class="triple1"><div class="triple2"><div class="triple3">のように classの名称をかえ、またそれぞれの属性が異なり、例えば最初にくるtriple1はテキストの幅を変えて適用したり、次のtriple2はフォントの色を変えたりなどとしたいのです。なお、必ず最初のくる<div class="triple1">はテキストの幅が何pxとか、次にくる<div class="triple2">はフォントの色レッドとか、次にくる<div class="triple3">はフォントの色ブルーとか一定の決まりを設けるものです。、ならば最初から、各class名をそれぞれに設定し属性も設定しておけばいいのではと言われそうですが、<div class="triple">はたくさんあり、たとえば商品情報が記載されているとし、その商品が入れ替わるばかりでなく、ランダムに減ったり増えたりするとしたときに単にhtml上の商品情報を書き換えたり、いれかえたりするだけで、いちいち<div class="triple">は<div class="triple1">とか<div class="triple2">とか書き換えなくて済むようにしたいのです。classの名称は下記にて書き換えられるようなのですが、書き換えたものに、テキスト文字の色を変えるとかの適応がうまくいきません。大変説明不足で申し訳ないのですが、単にhtml上のclassへの属性適応方法はと質問してしまいました。すみませんでした。 html上 <div class="triple"><p>あ</p></div> <div class="triple"><p>い</p></div> <div class="triple"><p>う</p></div> javascript上 var divs = document.getElementsByTagName("div"); var idnum = 1; for (var i = 0; i < divs.length; i++) { if (divs[i].className == "triple") { divs[i].setAttribute("class", "triple" + idnum++); } }