JavaScriptを使用して状況によってクラスを変更する方法
- JavaScriptを使用して、状況によってHTML要素のクラスを変更する方法について詳しく説明します。
- 具体的には、変数を使用して状況を示し、条件分岐を行い、該当するクラス名を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に変更したいのです。 こんな事ってできるのでしょうか？ご存知の方、ご教授ください。
- goroneko-begin
- お礼率38% (62/159)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
エレメントオブジェクトのclassName プロパティで設定できます。 例 document.getElementById('location1').className=status;
関連するQ&A
- JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- 締切済み
- JavaScript
- ＣＳＳで、ＩＤとＣＬＡＳＳを同時に設定することは可能ですか？
<div ID="main" CLASS="sub"></div>のように スタイルシートで、IDにメインのスタイル CLASSにサブのスタイルを設定してみて、 とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。 しかし、グーグルで”ＩＤ ＣＬＡＳＳ 同時”等で検索してみても、 同時に使えることが解説されたサイトが大変少なく、 果たして、同時使いは、CSSの構文違反にならないのか不安になり 質問させていただきました。 <div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、 やっても大丈夫なものなのでしょうか？ サポートされていないブラウザがあったりすることはないのでしょうか？
- ベストアンサー
- HTML
- 同じ i 番目のclassを連動させることはできますか？
お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；
- ベストアンサー
- JavaScript
- エレメントclass?の値をPHPの変数に入れる
Aタグをクリック→jsが発動(ajaxでphpにpostでエレメントID？を投げる)→phpでエレメントIDを受け取って処理 phpで処理した結果→jsに返す(ajaxの指定したエレメントclass？に渡すよう設定)→取得 selectの範囲の中なんですが、$stausにclass='edit_status'の結果を入れるにはどうしたらいいでしょうか。 <select> <option <?php $status=."class='edit_status'".; if($status == 1){ echo "selected"; }?> >下書き</option> <option <?php $status=."class='edit_status'".; if($status == 2){ echo "selected"; }?> >非公開</option> <option <?php $status=."class='edit_status'".; if($status == 3){ echo "selected"; }?> >公 開</option> </select> id <input type='text' value='1111' id='eid' class='edit_id'>
- ベストアンサー
- PHP
- ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ
<body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ 固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません
- ベストアンサー
- レンタルサーバ・ASP
- classList で、class名が付かない。
classList を使用して、新規で div タグに class 名を付けようと思っています。 div に id 名を付け、それを対象とした場合は、class 名は付きますが、 id名を含めない タグのみでは、class 名は付かないのでしょうか? コードは以下記述の通りです。 ご回答どうぞよろしくお願いいたします。 <html> <head></head> <body> <div id="hoge">class-name on tag.</div> <script> var dom = document.getElementById( 'hoge' ); //以下のように使えるなら理想です。 //var dom = document.getElementByTagName( 'div' ); dom.classList.add( 'test' ); </script> </body> </html>
- ベストアンサー
- JavaScript
- 時間帯によって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の知識はなく、ヒント等から自分で書くことはできないので、 恐縮ですが具体的なソースをお願いできればありがたいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 指定した スタイルの class のみ処理をする
Javascript で 指定した class のみの値を変更することは可能でしょうか？ id だと一つ一つ振らなければならないですが、 class なら複数にふれますよね。 複数にclassを指定して一括処理をしたいんです。 <div class="hoge">aaaa</div> <div class="hoge">bbb</div> みたいなものがあって document.getElementById("hoge").style.display = "none"; のように、 class=hoge のみ一気に非表示にしたいんです。 説明が下手ですみませんがよろしくお願いします。
- 締切済み
- JavaScript
- 同一ページのリンク設定を２種類にまとめて表記したい。
カテ違いでしたので再度こちらで質問させていただきます。 同じページに複数のリンク設定したのですが、それを２種類にまとめて表記したいのです。具体的にいうと下記を #Cと#D をまとめたいのです。 現在、 <style type="text/css"> div#A,B, a:link {color:#284c00;} div#C a:link {color:#ffffff;} div#D a:link {color:#ffffff;} div#A,#B, a:visited{color:#284c00;} div#C a:visited {color:#ffffff;} div#D a:visited {color:#ffffff;} div#A,#B,a:hover {color:#00bbff;} div#C a:hover {color:#000000;} div#D a:hover {color:#000000;} div#A,#B, a:active {color:#ff0000;} div#C a:active {color:#ffffff;} div#D a:active {color:#ffffff;} </style> とし、body以下にdiv idもそれぞれ設定しています。 #Cと#Dをまとめた表記にし、上の 【 div#A#B 】 に影響を与えないようにするにはどうすればいいのでしょうか？ 色々調べたりしてやってみたのですが全然うまくいきません。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
お礼
ありがとうございます。調べた方が足りませんでした。助かりました。