javascriptで文字の色を変える方法
- javascriptを使用して、指定した色の文字を表示させる方法について教えてください。
- javascriptのコードを使い、黒、ディムグレイ、灰、黒灰、銀、ライト灰、白の順で文字の色を変えることができる方法について教えてください。
- HTMLの<span>タグとjavascriptを組み合わせて、文字の色を変える方法を教えてください。
- ベストアンサー
javascriptについての質問です
先ほどと同じ質問ですが黒、ディムグレイ、灰、黒灰、銀、ライト灰、白の順でひだり側から文字でなくて色だけを間隔なしで表示させたいのですがなかなかうまくいきませんどなたかお教えください。 <!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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>文字の色を変える、</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- //#RRGGBB形式による色の設定 var myStr; <span style="border:thin solid red" ><span style="color:white;background-color:#000000">Black</span ><span style="color:white;background-color:#696969">Dimm gray</span ><span style="color:white;background-color:#808080">Gray</span ><span style="color:black;background-color:#A9A9A9">Dirk gray</span ><span style="color:black;background-color:#C0C0C0">Silver</span ><span style="color:black;background-color:#D3D3D3">Light gray</span ><span style="color:black;background-color:#FFFFFF">White</span ></span> document.write //--> </script> </body> </html>
- 74591111
- お礼率7% (10/132)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#3です。まちがいあるので、ていせい。 const hoge (element, css, color0/*[r,g,b]*/, color1/*[r,g,b]*/) { を const hoge = function (element, css, color0/*[r,g,b]*/, color1/*[r,g,b]*/) { に、 いやぁ～まいどのことで、もうしわけない。
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
あたらしめの Firefox ならうごくよ。 Yコンビネーターは、つかってみたかっただけで、つかいこなせていません（泣） ぜんかくくうはくは、はんかんにしてね ようそのてきすとのーどをあつめ、それらを１もじだけのspanでかこい、いろをつけました。 <!DOCTYPE html> <title></title> <p id="tx0">abcdefghijklmnopqrstuvwxyz</p> <p id="tx1">abcdefghijklmnopqrstuvwxyz</p> <script type="application/javascript; version=1.8"> const Y = function (f) (function (x) function (arg) f (x (x)) (arg)) (function (x) function (arg) f (x (x)) (arg)); const List = (function (first, rest, restmap) (function (node) Array.prototype.concat.apply (first (node), Array.map (rest (node), restmap)))) const lsSelf = (function (node) [].concat (node || [])); const lsChild = (function (node) Array.slice (node.childNodes)); const lsDescendantOrSelf = Y (function (again) List (lsSelf, lsChild, again)); const IsTextNode = (function (node) node.nodeType == 3); const isolate = (function (node) let (d = node.ownerDocument) let (s = d.createElement ('SPAN')) let (t = d.createTextNode ('')) let (p = node.parentNode) let (c = node.nodeValue.split ('')) (p.removeChild (node), s.appendChild (t), c.map (function (a) p.appendChild ((t.nodeValue = a,s.cloneNode (true)))))); const hoge (element, css, color0/*[r,g,b]*/, color1/*[r,g,b]*/) { if (! element.hasChildNodes ()) return; let span = lsDescendantOrSelf (element) .filter (IsTextNode) .reduce ((function (a, n) a.concat (isolate (n))), []); let len = span.length; let r = (color1[0] - color0[0]) /len; let g = (color1[1] - color0[1]) /len; let b = (color1[2] - color0[2]) /len; for (let i = 0, s; s = span[i]; i++) { s.style[css] = 'rgb(' +[ color0[0] + r * i |0, color0[1] + g * i |0, color0[2] + b * i |0 ].join (',') +')'; } } hoge (document.getElementById('tx0'), 'color', [0,0,255], [250,250,0] ); hoge (document.getElementById('tx1'), 'color', [250,250,250], [0,0,0]); hoge (document.getElementById('tx1'), 'backgroundColor', [0,0,0], [250,250,250]); </script>
- neko-ten
- ベストアンサー率55% (1287/2335)
うまくいかないならうまくいかないときの症状書きましょう。 とりあえず、なぜJavaScriptとして書いているのか謎。 <!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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>文字の色を変える、</title> </head> <body bgcolor="#ffffff"> <span style="border:thin solid red"><span style="color:white;background-color:#000000">Black</span> <span style="color:white;background-color:#696969">Dimm gray</span> <span style="color:white;background-color:#808080">Gray</span> <span style="color:black;background-color:#A9A9A9">Dirk gray</span> <span style="color:black;background-color:#C0C0C0">Silver</span> <span style="color:black;background-color:#D3D3D3">Light gray</span> <span style="color:black;background-color:#FFFFFF">White</span> </body> </html> 動的に変えないんだから別にこれでいいはず。 JavaScriptとしてみても、構文にすらなってないので・・・。
- askaaska
- ベストアンサー率35% (1455/4149)
先ほどの質問がなんだかわらないけどとりあえず <script language="JavaScript" type="text/javascript"> <!-- //#RRGGBB形式による色の設定 var myStr; document.write //--> </script> が不要ね
関連するQ&A
- javascriptに関する質問です
黒、ディムグレイ、灰、黒灰、銀、ライト灰、白の順でひだり側から文字でなくて色だけを間隔なしで表示させたいのですがなかなかうまくいきませんどなたかお教えください。 <!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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>文字の色を変える、</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- //#RRGGBB形式による色の設定 var myStr; myStr += "黒".fontcolor("#000000"); myStr +="ディムグレイ".fontcolor("#696969"); myStr +"灰".fontcolor("#8080809"); myStr +"黒灰".fontcolor("#A9A9A9"); myStr+"銀".fontcolor("#C0COCO") myStr+"ライト灰".fontcolor("#D3D3D3") myStr+"白".fontcolor("#FFFFFF") document.write //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- スクロールバーが反映されない
ＨＰ作成まったくの初心者です。 今つまづいているのが、スクロールバーの色が 変更できないことです。 ＩＥは「Internet Explorer 6 Service Pack 1 (Windows XP SP1) 」です。 いちおう、タグを載せます。 初心者なのでめちゃめちゃだと思いますので お恥ずかしいのですが、よければご教授ください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Style-Type" content="text/css"> <title>☆</title> <script type="text/javascript"> <!-- function jikoku() { dd = new Date(); document.F1.T1.value = dd.toLocaleString(); window.setTimeout("jikoku()", 1000); } // --> </script> <STYLE type="text/css"> <!-- body,td { font-size : 12px; color : #bc8f8f; font-family : Verdana; line-height : 15pt; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration : none; } a:link{ color : #ffb9d4; } a:active { color : #69b4; } a:visited{ color : #ffd9e4; } a:hover{ color : #FFd9b4; position : relative; top : 2px;} --> </style> <STYLE type="text/css"> <!-- body { scrollbar-face-color:#ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color:#ffb9d4; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; } --> </STYLE> </head> <body> <BODY background=img/wall.gif> </body> </html>
- ベストアンサー
- HTML
- CSSのアドバイスをお願いいたします。
<?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133; } .k { color : #336070; } .t { color : #454580; } .s { color : olive; } p { color : #222222; } body { background-color:#e0ffe0; } a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066; </style> <meta http-equiv="Content-Script-Type" content="text/javascript" />の１行を加えてみました。 この場合の記述の是非。 また記述すべき個所は合っているのでしょうか。
- ベストアンサー
- HTML
- jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 以下のようなものを作ったのですが、cgiによるjavascript出力
以下のようなものを作ったのですが、cgiによるjavascript出力がうまくいきません。 理由がわからず困っています。 【http://www.gran-fenix.com/nao_archive/test/index.htm】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テスト</title> <script type="text/javascript"><!-- var pageseq = 0; //--></script> <script src="./trick/test.cgi"></script> </head> <body style="background-color:white"> <noscript><p style="color:deeppink;font-weight:bold"> 【注意】 JavaScript が無効になっています。 </p></noscript> <br> <h1 style="font-size:200%;font-weight:bold;color:maroon"> <script type="text/javascript">document.write(page_title[pageseq]);</script> </h1> <hr> </body> </html> 【http://www.gran-fenix.com/nao_archive/test/trick/test.cgi】 #!/usr/local/bin/perl $jscr = 'test.txt'; $scr_body = ''; open (JSCR "<$jscr") || die "Can't open the JavaScript file\n"; while (<JSCR>) { $scr_body .= $_; } close (JSCR); print "Content-Type: text/javascript\n\n"; print <<"SCR"; $scr_body SCR 【http://www.gran-fenix.com/nao_archive/test/trick/test.txt】 var page_title = new Array(); page_title[0] = "テスト成功"; 具体的には、test.txtにある「テスト成功」の文字がHTMLのh1タグ部分に出力されません。 HTMLで、scriptタグのsrcを、test.txtと同じ内容のJSファイル test.js（場所も同じディレクトリ）にしてみると成功するので、原因はcgiにあると思うのですが、どこがおかしいのかわかりません。 なお、test.cgiのパーミッションは755、test.txtのパーミッションは644です。 よろしくお願いいたします。
- ベストアンサー
- CGI
- javascriptに関する質問です
javascriptに関する質問です タグの"<",">"を入力したら"&t",">"に置き換えまた（ダブルオークション）を入力したら&qut ""また(空白）を入力したら&mbsp;また"&"を入力したら&に置き換えるjavascriptを作りたいのですがいまいちどう作ればいいのか方向が分かりませんどなたかご教授ください 個人としてはremoveTagを使い変更したいですがなかなかうまくいきません どなたかご教授ください !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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タグを置き換える</title> <script language="JavaScript" type="text/javascript"> <!-- function removeTag() { var str = document.myForm.before.value; var newStr = str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/\s/g,' '); document.myForm.after.value = newStr }
- ベストアンサー
- JavaScript
- 携帯サイトでのcssトラブル
携帯サイトを作っています。 xhtmlの宣言を↓の通りにしております。 <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> リンクなどは、cssを使ってサイトを作っており、3キャリアのエミュレーターでは問題なく表示されています。 しかし、本の通りに作っているのですが、自分の携帯（docomo SH-03A)ではまったくcssが機能しません。 以下に、主に使っているタグなどについて書いていきます。何かおかしいところがあれば教えてください。 内部参照リンク <style type="text/css"> <!-- a, a:link {color:#ff0000;} a:visited {color:#ff0000;} a:active {color:#ffffff;} a:hover {color:#663399;} --> </style> ボディスタイル <body style="background-color:#ccccff;color:#000000;"> <div>タグ <div style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;" align="center">○○○○</div> ↑でだめだったので、↓のように<span>にはさんでみたがだめでした。 <div align="center"><span style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;">○○○○</span></div> 非常に困っています。なにとぞよろしくお願いします。
- ベストアンサー
- HTML
- javascript計算についての質問
単位の計算でＳなら４、Ａなら３、Ｂなら２、Ｃなら１、Ｄ、Ｆなら０で、それぞれ取得した単位数を入力したら平均を求めるjavascriptを作りたいのですがどのようにすればいいのかわかりません どなたかご教授ください。 たとえばＳのところに４を入力してＢのところに３を入力したなら、平均のところに３を出力するみたいな <!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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>QPA</title> <script language="JavaScript" type="text/javascript"> <!-- function calc(theForm） // 小数点以下を切り捨てる theForm.result.value = Math.floor(resultVal); } } //--> </script> </head> <body bgcolor="#ffffff"> <h2>指定したQPAを足した平均</h2> 全体の平均=（Sの総得点＋Aの総得点＋Bの総得点＋Cの総得点＋Dの総得点＋Eの総得点＋Fの総得点）/（Sの総単位数＋Aの総単位数＋Bの総単位数＋Cの総単位数＋Dの総単位数＋Eの総単位数＋Fの総単位数） <form name="myForm"><p> </p></form>
- ベストアンサー
- JavaScript
- どこがおかしいのでしょうか
<HEAD> <script language=JavaScript> <!-- if(top==self){ location.href="http://www.yahoo.co.jp"} // --> </script> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>猫</TITLE> <STYLE type="text/css"> <!-- body{ scrollbar-base-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; } --> </STYLE> </HEAD> スクロールバーノ色が変わりません。 何がおかしいのでしょうか。
- ベストアンサー
- CSS
- [CSS]エラーの原因
以前CSSとテーブルについてご回答頂き、何とか勉強しつつ作業しております。 何とかここまで書いてみたのですが、どうしてもエラーが 出てしまいます。そもそもそれがどうしてエラーになるのかが理解できておらず(手探りな物で申し訳ございません) もしよろしければソースを見ていただけないでしょうか。 以下が問題のある部分です。 行番号: 10 Parse error - Unrecognized : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- BODY{ background-color : white;} TD { text-align : left; padding-top : 8px; padding-left : 220px; padding-right : 10px; padding-bottom : 0; font-size : 25px; font-weight : bold; color : black; text-decoration : none; background-image : url(wall0805-2.gif); line-height : 1.4cm; background-repeat : repeat-x; background-color : white; } IMG { background-color : white; text-decoration : none; color : black; }
- ベストアンサー
- HTML
