• ベストアンサー

javascriptでのclass属性変更について教えて下さい。

javascriptでのclass属性変更について教えて下さい。 html上でclass=tripleがあるとして、javascriptでたとえば、color="red"を適応するにはどうすればいいのでしょうか？お解りになるかた、教えてください。 <div class="triple"><p>あ</p></div>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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@*/ }

dream-es
質問者

お礼

皆様方、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++); } }

その他の回答 (3)

回答No.3

「とんちんかん」とは、いわないで、まずそうぞうしましょう！ むかしは(も)おなじようなものより。 こんなことをしたいの？ ぜんかくくうはくは、はんかくに。 <!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>

dream-es
質問者

お礼

javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。

  • 0909union
  • ベストアンサー率39% (325/818)
回答No.2

こういう、とんちんかんの質問にはとんちんかんの回答になよようで？ 日本語になっていません。もう少し聞き方を勉強してください。 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"になります。分かりましたか？　あなたが以下にとんちんかんな質問をしたかわかりますか？

dream-es
質問者

お礼

javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。

  • zeff
  • ベストアンサー率69% (137/198)
回答No.1

「具体的にどうしたいのか」がまったくわからないので、 だいたいで思いつく限り書きます。 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>

dream-es
質問者

お礼

javascript初心者の為、大変とんちんかんなご質問ですみませんでした。そんな中ご親切にご回答いただきました事感謝申し上げます。皆様のご回答を参考にし、勉強をしたいと思います。なお最後にご回答いただきました方の欄にて、質問の補足をいたしました。javascript初心者の為、ご理解いただけるような補足ではないかもしれませんが、お詫びかたがたせめて少しでもわたくしのしたいことを記しました。ご立腹されたかとは思いますが、安易にご質問したことすみませんでした。実際本を買って仕事の合間少しづつですが頑張ってみたのですが、基礎ができておらずご質問する資格がないのかもしれませんが、質問してしまいました。すみませんでした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptでCSSの変更

    JavaScriptでCSSのclassの内容を変更（例えばcolor:Greenのように）をしたいのですがどのようにすればよいでしょうか。 .message { color:Red; } <div class="message">あああああ</div> <div class="message">いいいいい</div>

  • JavaScriptのdiv.style属性の変更が反映されない：最後

    JavaScriptのdiv.style属性の変更が反映されない：最後のDivタグを除いたすべてのDivタグに改ページ属性を有効にするようJavaScriptで制御したいと考えています。しかし、以下のようなプログラムでは、スタイル属性が更新されず改ページが実行されてしまうため、１枚真っ白な紙が印刷されることになってしまいます。こちらの意図したように動作させるにはどうしたらよいでしょうか。 <html> <head> <style> div.test { page-break-after:always; color:black; } </style> <script type="text/javascript"> window.onload = function() { var divs = document.getElementsByTagName('div'); for(i = divs.length - 1; i >= 0; i--){ if(divs[i].className == "test"){ divs[i].style.pageBreakAfter = ""; break; } } }; </script> </head> <body> <div class="test">テスト</div> <div class="test">テスト</div> <div class="test">テスト</div> </body> </html>

  • クリックでclass属性を変更するjavascriptはどう書けば良い

    クリックでclass属性を変更するjavascriptはどう書けば良いか教えて下さい。 クリックで要素が開閉するスクリプトのシンプルなものを探しています。 （開状態でクリック→要素を閉じる。閉状態でクリック→要素を開く） html内にonclickを書かないやり方でお願いします。 クリックする箇所はボタンではなく、aタグのリンクエリアです。 よろしくお願いします。

  • HTMLのclass属性について

    HTMLのclass属性について class属性にスペースを含ませることはできますか? 一例として、<p class="info game"> のように

    • ベストアンサー
    • HTML
  • 状況（変数）によってclassを変えるには

    <style type=text/css><!-- .sub1 a:hover{color: red;} .sub2 a:hover{color: blue;} --> ・・・（省略)・・・ <style type="javascript"> var status = "sub1"; </style> ・・・（省略)・・・ <div id="location1" class="sub1"> <a href="#">この色を変更</a> </div> --------------------------- statusの状況によってid="location1"のclassを変えたいと思っています。 statusの状況が"sub2"だったらclassをsub2に、"sub1"だったらclassをsub1に変更したいのです。 こんな事ってできるのでしょうか？ご存知の方、ご教授ください。

  • Class属性をJavaScriptで動的に切り替える

    http://youmos.com/reference/set_element_class.html 上記のサイトを参考に”Class属性をJavaScriptで動的に切り替える”を実現したいのですが、記述が間違っているのか下記のソースでは動きませんでした。 /**********************************************************/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- .left { float:left; margin:0px 12px 12px 0px; } .right { float:right; margin:0px 0px 12px 12px; } --> </style> <script type="text/javascript"> var changed = false; function changeSample(){ if(changed){ setElementClass('sample_img','left'); }else{ setElementClass('sample_img','right'); } changed= (changed)?false:true; } //class要素の追加・変更 function setElementClassById(elem, value) { if(document.getElementById) { var obj = document.getElementById(elem); if(obj) { obj.className = value; } } } addListener(document.getElementById('sample_img'), 'click', changeSample, false); </script> </head> <body> <p><img src="pic_1.gif" alt="setElementClassById" id="sample_img" class="left" /> ああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああ ああああ</p> </body> </html> /********************************************************/ どこか間違った記述がありましたらご教授頂ければ幸です。m(_ _)m 宜しくお願い申上げます。

  • javascriptで困っています。

    Javascriptで <div id='abc' class='xyz'> とあるdivタグに２つめのclass属性を追加したり、削除するにはどうしたらいいのでしょうか？ よろしくお願いします。

  • 時間帯によってclass名を変更したい

    時間帯毎に特定のボックス内の背景色を変更したいのですが、 スタイルシートで色を設定しておいて、html内のclassの値を変更するやり方を教えて下さい。 ※スタイルシートで3種類の色を設定 .bg1 {background-color: #000000;} .bg2 {background-color: #ff0000;} .bg3 {background-color: #ffffff;} ※時間帯は3種類 朝（7～10時）＝class="bg1" 昼（10～18時） ＝class="bg2" 夜（18～翌7時）＝class="bg3" ※html内のボックスのクラス名を時間帯によって class="bg1" class="bg2" class="bg3" のように変更したい。 <div class="○○">このBOX内の色を時間帯毎に変更したい</div> 私はjavascriptの知識はなく、ヒント等から自分で書くことはできないので、 恐縮ですが具体的なソースをお願いできればありがたいです。 どうぞよろしくお願いします。

  • 表示するページ毎にhtml上のclass名をJavaScriptで変更するには？

    <div class="default">テキスト内容</div> 上記のようなHTMLが、全ページに共通で入っているという前提で 『http://www.アドレス.com/』を表示している時のみ <div class="toppage">テキスト内容</div> と、言うようにclass名を JavaScriptで変更する事は可能でしょうか？ ■例： http://www.アドレス.com/　→　class="toppage" http://www.アドレス.com/contact/　→　class="default" http://www.アドレス.com/company/　→　class="default"

    • ベストアンサー
    • HTML
  • setAttribute class について

    setAttributeから class属性を設定するために div.setAttribute("class", "hoge"); としていますが、safariではclass属性が有効になりません。 safari 5.1です。 どなたか分かりますでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する