JavaScriptで文字色を変更する方法と注意点
- JavaScriptを使用して文字色を変更する方法について説明します。
- 特定の要素の文字色を変更するために、getElementById関数を使用して対象の要素を特定します。
- 文字色を変更するためには、要素のstyle.colorプロパティを操作します。ただし、変更後は元の変更を取り消すことはできませんので注意が必要です。
- ベストアンサー
style.colorなど
<span id= "AAA">文字列A 文字列B</span> 上記の文字色を変更する操作においてのJavaScriptについてです。。 ソースがあちこち飛んでいて全ての記述は困難なので書き出します。 MojiA="文字列C " MojiB="文字列D" //文字列C 文字列Dを新たに上書きします document.getElementById('AAA').innerText = MojiC + MojiD ; //一定時間したら以下が実行されて文字色が変色します function CHG() { document.getElementById('AAA').innerHTML = MojiC.fontcolor("#ffff00") + MojiD.fontcolor("#ff0000") ; } //再び一定時間したら以下が実行されて文字色が変色します function mojiClear() { document.getElementById(AAA').style.color = "#ffffff" } この時、最後のスクリプトは MojiC.fontcolor("#ffffff") + MojiD.fontcolor("#ffffff") ではなく、.style.color = "#ffffff"を指定したいのですが、ここが機能しません。 ユーザーの選択項目によって変数が違ってくるので、id=AAAとして一括で変色したいのです。 MojiC.fontcolor("#ffff00") + MojiD.fontcolor("#ff0000") ;の指定を行った後では、 スタイル変更は不可能なのでしょうか？
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを置きました。 http://jsfiddle.net/5TvT5/ 上段が現在の状態、下段が期待する状態です。 親要素ではなく、子要素にスタイルを指定してください。 > MojiC.fontcolor("#ffff00") String#fontcolor はブラウザ依存ですので、element.style.color で統一した方がいいかと思います。 http://msdn.microsoft.com/ja-jp/library/cc409889.aspx https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/String/fontcolor > document.getElementById('AAA').innerText innerText もブラウザ依存なので textContent と併用してください。 https://developer.mozilla.org/En/DOM/Node.textContent
関連するQ&A
- クラスのcolor 「#ff0000;」を表示
ＣＳＳのクラスsampleのcolor 「#ff0000;」を表示する方法を教えてください。 // cssの部分 .sample ｛ color: #ff0000; ｝ // html内 ＪａｖaScriptの部分 <script type="text/javascript"> function () { var element = document.getElementById("sample"); var samplecolor = element.style.color; } </script> <span id="samplecolor"></span> //----------結果------------------- #ff0000;
- ベストアンサー
- JavaScript
- mapリンクとテキストスタイルの連動について
年末に失礼します。 ＿＿＿＿＿ ｜ ｜ aaa(テキスト) ｜ ＭＡＰ ｜ bbb(テキスト) ｜ ｜ ccc(テキスト) ￣￣￣￣￣￣ 上記のようなHTMLページを作りました。 MAPのリンクにマウスをあわせると、テキストのスタイルが変更するよう設定したいのですが、どのようにすればよいでしょう？ 自分で作ったスクリプトは以下の通りです。 ----------------------------------------------- <style type='text/css'> #s1 {color: "#000000"; font-size:14pt;} </style> <script language="JavaScript"> function setChange(){ document.getElementById("s1").style.color = "#FF0000"; document.getElementById("s1").style.fontSize = 20pt; } function setReturn(){ document.getElementById("s1").style.color = "#000000"; document.getElementById("s1").style.fontSize = 14pt; } </script> <map name="X"> <area shape=circle coords="x,y,z" onMouseover="setChange()" onMouseout="setReturn()" href="http://www.yyy.com/"> </map> <span id="s1">aaa</span> *<head><body>のタグは省略 ------------------------------------------------- ものの見事に反映しませんoTZ。修正・ご教示をお願いします。 また、bbb・cccもaaaと同様のスタイル変更をかけたいので、「この方がよい」というアイデアがありましたら、お教え下さい。 宜しくお願いします。
- ベストアンサー
- JavaScript
- HTMLからXHTMLへ変更する際のhtmlファイルの内容の変更について
HTML4.01では<div style="color:#ffffff">と</div>の間の文字色をjavascriptの中の関数で変える時、 <script type="text/javascript"> function func() { document.getElementById("xx")="#ff0000"; } </script> と記述しますが、XHTMLではstyle属性が非推奨となっています。 XHTMLでstyle属性を使わずにボタンを押すことで<div style="color:#ffffff">と</div>の間の文字色を変えるには javascriptの中の関数内でどのように記述すればよいのでしょうか。
- 締切済み
- HTML
- style.color の謎
以下のスクリプトを書いたのですが、色の変更が最初の一度だけしかできません。 色を元に戻すために、どのような訂正をすれば良いのか教えて下さい。 <SCRIPT> function ChangeColor(sw) { if (sw = 1) { document.getElementById('inputBox').style.color = 'red'; } else if (sw = 0) { document.getElementById('inputBox').style.color = 'blue'; } } </SCRIPT> <FORM> <INPUT type="text" id="inputBox" > <INPUT type="button" value="Change my color " onClick="ChangeColor(1)"> <Button onClick="ChangeColor(0)" > Reset </Button> </FORM>
- ベストアンサー
- JavaScript
- テキストのデフォルト非表示に関して
テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>
- ベストアンサー
- JavaScript
- スタイルシートを一括で・・・。
<STYLE type="text/css"> <!-- body{ scrollbar-base-color:#000000; scrollbar-arrow-color:#ff0000; scrollbar-darkshadow-color:#00ffff; scrollbar-face-color:#00ffff; scrollbar-highlight-color:#00ffff; scrollbar-shadow-color:#666666; } --> </STYLE> このスタイルシートをすべてのページに入れる方法ってありませんか。 色の変更も１つだけの変更ですべて変更される方法があれば教えてください。
- ベストアンサー
- CSS
- 時間でlink, vlink, alinkの文字色変えたい
時間で、文字色や背景を変更するスクリプトを使っています。 しかし、リンク文字（link, vlink, alink）の色が変わらないため、背景によっては見えにくい文字色となってしまいます。 リンク文字も同様に時間で変化させたいのですが、どのようにすれば良いでしょうか？ お分かりの方がいらっしゃいましたら、ご教授お願い致します。(>_<) 使っているスクリプトは以下のような感じです。 -------------------------------------------- TimeH = (new Date()).getHours(); if (TimeH>=0 && TimeH<=12) {myBG="url(./xxxxx/bg_01.jpg)"; myBGcolor="#FF00FF"; myColor="#FFFFFF";} else if (TimeH>=13 && TimeH<=24) {myBG="url(./xxxxx/bg_02.jpg)"; myBGcolor="#00FF00"; myColor="#000000";} myOP = window.opera; myN6 = document.getElementById; myIE = document.all; if (myOP) myBR="O6"; else if (myIE) myBR="I4"; else if (myN6) myBR="N6"; else myBR=""; function bg1(){ if (myBR == "I4"){ document.all.bdy1.style.background = myBG; document.all.bdy1.style.backgroundColor = myBGcolor; document.all.bdy1.style.color = myColor; } else if (myBR == "N6" || myBR == "O6") { document.getElementById("bdy1").style.background = myBG; document.getElementById("bdy1").style.backgroundColor = myBGcolor; document.getElementById("bdy1").style.color = myColor; } } <BODY ID=bdy1 onload="bg1()">
- ベストアンサー
- JavaScript
- DreamWeaverMXでスタイルシートを使わない方法
DreamWeaverMXを使用しています。 文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。 例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css"> <!-- .style1 {color: #FF0000} --> </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。 これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか？ ご存知の方がいましたらよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- 【javascript】document.getElementByIdは一つしか使えないの？
以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはＩＥ，ＦＦと試しましたが共に同じ結果でした。 ＦＦのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか？
- ベストアンサー
- JavaScript
- 色をラジオボタンで選択
エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか？ うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>
- ベストアンサー
- JavaScript
お礼
fontcolorの指定に負けてしまっていると言うことなんですね。 改善したいと思います。 ご回答ありがとうございました。