- ベストアンサー
スタイル切り替えの記述方法
document.getElementById('style01).style.fontSize='12px'; のようなやり方で行間やテーブルセルの余白も切り替えたいのですが、 記述方法がわかりません。 document.getElementById('style01).style.lineHeight='1.2'; document.getElementById('style01).style.padding='120%'; とやっても動きません。 記述方法を教えて下さい。 よろしくお願いいたします。
- cumati
- お礼率78% (11/14)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
getElementsByClassです。 つづりが違うので注意してください。 配列になるというのは、classは複数存在するのでその分だけ結果が返ります。 getElementByIdのように一意にはならないためです。 なので、 var e = document.getElementsByClass('style02'); if ( e.length ) { for (var i=0;i<e.length;i++) { e[i].style.lineHeight='1.9'; } } else { e.style.lineHeight='1.9'; } のようにします。 検証してないのでエラーがでたらすいません。 感じをつかんで頂ければ幸いです。
その他の回答 (2)
Macのことはちょっと分からないので、補足のHTMLの指摘だけ。 getElementByIdは、idに対してのものなので、classの属性は取得できません。 "style02"はクラスになってるのでエラーになってます。 また、ご存知かと思いますが、idは一箇所にしか定義できませんので、classに定義したいときは、getElementsByClassメソッドを使います。 その時の戻りは配列になってますのでご注意下さい。
補足
ありがとうございます！ idだとたくさん必要になるので、classにしたい場合は、 document.getElementByClass('style02').style.lineHeight='1.9'; にすればいいんでしょうか？ 「戻りは配列になる」とはどういう意味ですか？
まず、記述がまちがってます。 document.getElementById('style01').style.padding='120%'; ですね。 style01が正しく'で囲まれてません。 あとは、idは正しくタグにふられてますか？ できれば、該当のテーブルのソースも見せて頂けると正しく指摘できると思いますが。
補足
すみません；； 例えばこれで文字サイズは変わるんですが、他のスタイルが変更されません。それからMacIE5だと、リンクされている部分の文字サイズしか変更されません。どうしてなんでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .style01 {font-size: 12px;padding:30px;} .style02 {line-height:1.3;padding:30px;} --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function small() { document.getElementById('style01').style.fontSize='9px'; document.getElementById('style02').style.lineHeight='1.9'; document.getElementById('style02').style.padding='100PX'; } function large() { document.getElementById('style01').style.fontSize='16px'; document.getElementById('style02').style.lineHeight='1.1'; document.getElementById('style02').style.padding='10PX'; } //--> </script> </head> <body> <a href="javascript:small()">サイズを小さく</a> <a href="javascript:large()">サイズを大きく</a> <table width="500" border=0 cellpadding=0 cellspacing=0 id="style01"> <tr> <td bgcolor="#999999"><!-- --> <table border=0 width="100%" cellpadding=3 cellspacing=1 id="p1"> <tr> <td width="20%" align=center bgcolor="#cccccc">2006/1/27</td> <td width="40%" bgcolor="white" class="style02"><a href="">ダミーテキスト</a><br>ダミーテキスト</td> <td width="40%" bgcolor="white" ><a href="">ダミーテキスト</a><br>ダミーテキスト<br>ダミーテキスト</td> </tr> <tr> <td width="20%" align=center bgcolor="#cccccc">2005/12/25</td> <td width="40%" bgcolor="white" class="style02"><a href="">ダミーテキスト</a><br>ダミーテキスト<br>ダミーテキスト</td> <td width="40%" bgcolor="white" ><a href="">ダミーテキスト</a></td> </tr> <tr> <td width="20%" align=center bgcolor="#cccccc">2005/11/20</td> <td width="40%" bgcolor="white" ><a href="">ダミーテキスト</a></td> <td width="40%" bgcolor="white" ><a href="">ダミーテキスト</a></td></tr></table></td></tr></table></td> </body> </html>
お礼
曖昧だったところがわかって助かりました。 おかげさまでやりたたっか事が出来ました。 どうもありがとうございました！！