classListを使用してclass名を付ける方法とは？
- classListを使用してclass名を付ける方法について解説します。
- HTMLのdivタグにid名を含めない場合、classListはclass名を付けません。
- getElementsByTagNameメソッドを使用することで、全てのdivタグにclass名を一括で追加することができます。
- ベストアンサー
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>
- yukiling
- お礼率72% (13/18)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞id名を含めない タグのみでは、class 名は付かないのでしょうか? 要素を特定できていれば、同じ方法で設定することが可能です。 getElementsByTagName()を利用した場合、返されるのは要素配列ですので、配列として処理するようにしてください。 ＞dom.classList.add( 'test' ); 簡略化した記述法をしたければ、jQueryなどを利用することでユーザが利用しやすい形での記法が用意されていますので、少し記述は違いますがイメージなさっているようなことも可能です。 ご提示のイメージの場合、 $(".hoge").addClass("test"); みたいな記述で実現できると思います。 （クラスで選別した要素群にクラス名を設定することは、実質的にはあまりないと思いますが。）
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
divが１つなら var dom = document.querySelector('div') もしくは var dom = document.getElementsByTagName('div')[0]
お礼
回答ありがとうございます。
関連するQ&A
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLを使ってID要素の内容を変えたい
innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>
- ベストアンサー
- JavaScript
- IDの持たせ方 (Re: IDのHTML文字列を…)
すみません、締め切った質問ですが、ご回答くださった steel_grayさんが予測されていた通り（下記）、 > ページ内の全リンクに「<br>↑のファイルがある…」が足されます。 > 一部のリンクだけに足すようにするにはなにか条件が必要です。 > （あるIDを持つDIV配下のリンクだけにするとか、 > あるclassを持つアンカーだけにする等。） '一部のリンクだけに' リンクを足すようにしたいの ですが、、、。自分なりに考えてみたのは、 (1) <head>内のスクリプトで下記の部分を改訂 var AnchorList = document.getElementsByTagName('A'); ↓ var AnchorList = document.getElementById('folder'); # getElementByIdでいいのですよね？getElement【s】ByIdでなく (2) <body>内の「<br>↑のファイルがある…」を挿入したい部分に<div>タグ＋IDを追加 <div id="folder"> <a href="file:///C:\temp\hoge1.txt">file:///C:\temp\hoge1.txt</a> </div> でも、動作せず、スクリプトエラーにもならず、です。 何が誤っていますでしょうか。 すみません、よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptのクラス名操作について
javascriptのgetElementsByClassNameについて質問があります。 下記のようなクラス名を削除して別のクラスをつけるサンプルプログラムを作成しましたがjavascriptのエラーが出てクラスの追加できません。 ※エラー内容：Uncaught TypeError: Cannot read property 'classList' of undefined ---------以下プログラム-------------- <div class="a">aaa</div> <script> var obj = document.getElementsByClassName("a"); obj[0].classList.remove("a"); obj[0].classList.add("b"); </script> --------以上---------------------------- 「obj[0].classList.remove」をした時の前後で「console.log("obj");」をしたところ、 remove後のobjの値が空になっていました。 なぜこうなるか分からないため、分かる方ご教授の程よろしくお願い致します。
- 締切済み
- JavaScript
- class名で選択できるようにしたいですが。。。
次はclass名がalarmのリンクをクリックしたとき「Alarm!」という警告が開くように意図したものですが。。。 <!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=shift_jis" /> <title>無題ドキュメント</title> <script type="text/javascript"> var funcs = document.getElementsByTagName("*"); for (var i=0;i<funcs.length;i++){ if(funcs[i].className=="alarm"){ function alarm() { alert ("Alarm!"); } } } </script> </head> <body> <a href="#" class="alarm" onclick="alarm()">click</a> </body> </html> 考えどおり動けないですね。どこが悪いのでしょうか。 忙しいお時間で申し訳ございませんが、ご意見のほどよろしくお願いいたします。
- 締切済み
- JavaScript
- appendChildがieだとできない？？
こんにちは。DOMについては全く無知です。 このようなのを作ったところ、google chromeでは動いたものの、ieでは動きませんでした。 var iBody = $("hoge").contentWindow.document.getElementsByTagName("body")[0]; var newText = document.createElement("div"); newText.innerHTML = "aaa"; iBody.appendChild(newText); ※$("hoge")は、iframeタグを指しています いろいろ試したところ、ieだとフレーム内にアクセスすることができないみたいです。 どうすればいいのか、ご存知でしたらご教示願います。
- ベストアンサー
- 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
- JavascriptでInputClassの表示を変えるには
以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。
- ベストアンサー
- Java
- getElementsByClassName使い方
getElementsByClassName を使って記述コードの tag2、tag3 の style="color: #cccccc;" を 削除するには、どのようにすれば良いのでしょうか? 自身のスクリプトは残念ながら動作せず。仮に動作してもnode指定はしません。 <div class="abc" style="color: #cccccc;">tag1</div> <div class="abc" style="color: #cccccc;">tag2.</div> <div class="abc" style="color: #cccccc;">tag3.</div> <script> var hoge = Array.filter( document.getElementsByClassName( this.attr ), function( elements ){ return elements[0].nodeName == this.tag; }); hoge.removeAttribute( 'style' ); </script>
- ベストアンサー
- JavaScript
- 【javascript 文法】値渡し？参照渡し？
以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？ と混乱しています。 この辺のところを、教えてください。お願いいたします。
- ベストアンサー
- JavaScript
お礼
getElementsByTagName()が配列というのは、勉強になりました。 回答ありがとうございます。