javascriptでスタイルを動的に作成する方法
- javascriptで動的に新たにクラスを作成してスタイルを設定する方法を教えてください。
- <html>の<style>～</style>をjavascriptで記述するにはどう書けばよいでしょうか？
- document.write('<style> .hoge {color: red;}</style>');では、<style>タグを埋め込むのと同じですので、純粋なjsのcodingをご教示ください。(prototype.jsなどのライブラリを使わない方法)
- ベストアンサー
javascriptでスタイルを動的に作成する方法
javascriptで動的に新たにクラスを作成してスタイルを設定する方法を教えてください。 たとえば、 <html> <head> <style> .hoge { color: red; } </style> </head> <body></body></html> の<style>～</style>をjavascriptで記述するにはどう書けばよいでしょうか？ もちろん、 document.write('<style> .hoge {color: red;}</style>'); では、<style>タグを埋め込むのと同じですので、純粋なjsのcodingをご教示ください。(prototype.jsなどのライブラリを使わない方法) よろしくお願いします。
- kahata
- お礼率39% (66/168)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules こちらに解説、サンプルがあります。 style構文が無いhtmlにstyle自体を追加したい時は次のように。 document.getElementsByTagName('head')[0].appendChild(document.createElement('style')); この後、参考URLにある方法でスタイルシートオブジェクトを取得し、 insertRuleやaddRuleで内容を加えていきます。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
本筋は#1さんの回答におまかせして 普通に考えればスタイルシートはスタティックに用意しておいて スタイルシート名（cssファイル）や、クラス名を動的に切り替えるのが 妥当な運用方法だと思います
補足
勿論、理解した上で特殊ケースだからこそ質問したのです。
関連するQ&A
- DreamWeaverMXでスタイルシートを使わない方法
DreamWeaverMXを使用しています。 文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。 例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css"> <!-- .style1 {color: #FF0000} --> </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。 これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか？ ご存知の方がいましたらよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- JavaScriptで任意の文字の色を変える方法
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1239134982 「JavaScriptで任意の文字の色を変える方法を初心者でも分かりやすく」 というのを見つけたのですが、全然分かりません。 <html> <head> <script type="text/javascript"> function colorChange(){ document.getElementById("cc").style.color="#"+Math.floor(Math.random()*256*256*256).toString(16); //～.style.color=xx; //xxには色を指定,サンプルではランダム //例）"red"or"#ff0000" -> 赤 } </script> </head> <body> <span id="cc">ここ</span>が変わります<br> <input type="button" onclick="colorChange()" value="変更"> </body> </html> どこに、任意の文字を書き込めばいいのですか？ 色の所はサンプルありますが、 //～.style.color=xx;→ //～.style.color="red"or"#ff0000"; この部分を、このようにすれば赤になるんですか？ どなたか教えて下さい。 ブラウザ：opera12です。 後、opera_jsに放り込めば使えるのでしょうか？ 宜しくお願い致します。
- 締切済み
- ブラウザ
- JavaScriptでa:activeなどの設定を取得する方法
JavaScriptでaの疑似クラスであるactiveやhoverの色設定を 取得する方法はないでしょうか？ IDでは下記のような感じで設定を読み書きできますが。 これらの疑似クラスはアクセスできないのでしょうか？ 調べてみましたが目的の情報にはたどり着けませんでした。 よろしくお願いいたします。 <span id="hoge" style="color:red">hoge</span> <script type="text/javascript"> <!-- var hogeColor= document.getElementById( "hoge" ).style.color; alert( hogeColor ); //--> </script>
- 締切済み
- JavaScript
- 時間ごとにスタイルシートを変える
<HEAD> <SCRIPT LANGUAGE="JavaScript"> function geth(t){ if ( t <= 05 ) document.write ("<body link="#0000ff">"); else { if ( t <= 17 ) document.write ("<body link="#0000ff">"); else { if ( t <= 23 ) document.write ("<body link="#0000ff">"); }}} </SCRIPT> </HEAD> <SCRIPT LANGUAGE="JavaScript"> h = new Date(); geth(h.getHours()); </SCRIPT> Java Script を使うと時間ごとに異なったフォントの色を のように指定できますが、 リンクの背景色のようなスタイルシートを使わないと出来ない 部分を時間ごとに色を変える方法をお願いします。 a { background-color : ccf ; }
- 締切済み
- その他([技術者向] コンピューター)
- SSIをJavascriptの変数に割り当てる方法
はじめまして！JavaScriptで質問があります。 JavaScriptで質問があります。 以下のようなwindowを生成し、HTMLを出力するJavaScriptコードをJSファイルとして登録し、 <script type="text/javascript" src="..."></script> で参照しています。 JSファイル内の[[ここに改行コード]]はSSIファイルを読み込んでいます。 SSIファイルの内容は改行コード、"（ダブルクォーテーション）を含んでいます。 この場合win.document.write(に続く'（シングルクォーテーション）で囲った文字列が改行してしまうので、 JavaScriptエラーとなってしまいます。 このエラーを解決できる手段はないでしょうか。 ↓JSファイル ---------------------------------- function windowOpen() { var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>[[ここに改行コード]]</body></html>'); } ---------------------------------- function内で以下のようにコメントを出力し、windowOpenの関数のコードを読み取ることができれば、 windowOpenCommentStart～windowOpenCommentEndまでの文字を切り取り、変数に代入することができる のですが、関数のコードを取得することなんてできませんよね。。 ---------------------------------- function windowOpen() { /* windowOpenCommentStart [[ここに改行コード]] windowOpenCommentEnd */ var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>' + [[ここに改行コードを変数化]] + '</body></html>'); } ---------------------------------- JSファイル内に[[ここに改行コード]]を出力することが条件ですが、 どんな方法でもよいので実現する方法はないでしょうか。 環境：WindowsXP ブラウザ：IE6,FireFox2
- ベストアンサー
- JavaScript
- FireFoxについて
JavaScriptを勉強中のものです。 単純に、『テキストボックスの文字色を変えるだけ』のスクリプトを組んだのですが、 ＩＥでは動いて、FireFoxでは動かない、という状況に陥っています。 ソースは下記のとおりです。 -------------------------------------------------------------------------------------------------------------------- <html> <head> <Script Language=JavaScript> function js_ClickBtn_Blue() { document.getElementsByName("txt1")(0).style.color = "blue"; } function js_ClickBtn_Red() { document.getElementsByName("txt1")(0).style.color = "red"; } </Script> </head> <body> <input type=text name=txt1 value="あいうえお"> <br> <br> <input type=button name=btn1 value="青" style='color:blue;' onClick='js_ClickBtn_Blue();'> <input type=button name=btn1 value="赤" style='color:red;' onClick='js_ClickBtn_Red();'> </body> </html> -------------------------------------------------------------------------------------------------------------------- なぜ、IEでは動いて、FireFoxでは動かないのでしょうか？ 【知りたいこと】 ・FireFoxで動かない理由 ・FireFoxでテキストボックスの文字色をJavaScriptで変更するには どういった実装をしたらよいか ちなみに環境は、 【パソコンのＯＳ】Windows7 Enterprise 【ブラウザ】 Internet Explorer 8 FireFox 40.0.2 です。 知っている方いましたらご教授お願いします。 以上です。
- 締切済み
- JavaScript
- 外部JavaScriptの書き方
外部JavaScriptの書き方 <script language="JavaScript" src="data.js"></script> 上記data.jsから、他サーバーの外部javascriptを読み出すには 以下のよな書き方で正しいでしょうか？ document.open(); document.write('<script language="JavaScript" src="http://hoge.com/data.js"></script>'); document.close();
- ベストアンサー
- JavaScript
- JavaScriptで、１枚だけ画像表示する方法とリンクについて。
皆様、こんにちは。 以前に同じ内容がありましたら、お詫び致します。 JavaScriptで画像表示をしたいのですが、１枚だけ表示する方法がよく分かりません。 ちなみに、document.write()で作りたく、 「()」内にタグの「<IMG src="">」を入れてJavaScriptで作りたいのですが、方法が分からなくて。 それと、同じくタグの「<A href="meiltto:">」を JavaScriptで作りたいのですが、可能なのでしょうか？ 「()」内は、「''」で括る事になるのですが、上手くいかなくて。 フォント指定「document.write('<FONT color="">');//」や 改行「document.write("<BR>");//」 を作れているので、他のタグも出来るかなと思っているのですが、 良い方法がありましたら、何方様か教えて下さい。 皆様、お忙しい中申し訳ありませんが、 方法がご座いましたら、宜しくお願い致します。
- ベストアンサー
- JavaScript
- Javascriptで文字の書き換え
現在、IE8とChromeを使用しています。 どちらのブラウザで試してもdocument.write("文");は読み込みますが <id>で指定したタグの中身が変わりません。 javascriptに書いたinnerHTML及びinnerTextの使い方か、もしくは、 根本的なところを何処か間違っているでしょうか？ -----------HTML文------------------------------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2011_09_02_1</title> <link rel="stylesheet" href="2011_09_02_1.css"> <script type="text/javascript" src="2011_09_02_1.js"></script> <body> <div id="str"><h3>Good morning</h3></div> </body> </html> ---------------外部CSS文----------------------------------------------- div h3{ color:#0000ff; } ---------------外部javascript文------------------------------------------ //タグを含む書き換え用ソース document.write("読み込むかテスト"); var chenge; chenge = document.getElementById(str); chenge.innerHTML = "Good Night"; ---------------------------------------------------------- //下は後から試した文--------文字のみ書き換え用ソース document.write("読み込むかテスト"); //document.getElementById("str").innerText = "Good Night"; --------------------------------------------------------------------------
- ベストアンサー
- JavaScript
- 同じJavaScriptを共通にして、別ファイルにする方法は(ソース付き)？
よろしくお願いします。 ログの出力をするために、全てのページに同じJavaScriptを埋め込んでいます。 ただ、あまりにも行数が多くなる可能性があるので、この部分を１つのファイルにまとめたいと思っています。 具体的には、現状を変更後のようにしたいと思います。 そこで、Common.jsにはどのように記述をすれば良いでしょうか？ ●現状 </table> <SCRIPT Language="JavaScript"> <!-- document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"'>"); // --> </SCRIPT> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "********"; urchinTracker(); </script> </body> </html> ↓↓↓ ●変更後 </table> <SCRIPT SRC="../scripts/Common.js"></SCRIPT> </body> </html>
- 締切済み
- HTML
お礼
ありがとうございました。そのものズバリで大変役に立ちました。