みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

メニューのリンクをクリックして、タイトルの色を変える方法。

メニューのリンクをクリックして、タイトルの色を変える方法。

上記の操作をするための記述内容がわかりません。

以下に、HTMLを載せます。

<style type="text/css">
h2{
color : #98FB98;
font-size : 69px;
letter-spacing: 0.8em;
font-family: impact;
margin:0px 0px 0px 10px;
}
TABLE {
color : #57450f;
font-size : 12px;
}
#bg{
background-color : #dedec2;
border-right-style : solid;
border-bottom-style : solid;
border-right-color : #57450f;
border-bottom-color : #57450f;
border-right-width : 1px;
border-bottom-width : 1px;
width:460px;
}
#td1{
background-image : url(image/back01.gif);height : 60px;
vertical-align:top;
padding:2px;
color : #dedec2;
}

#td2{
background-color : #665c50;
height : 20px;
text-align : right;
}

#left{
width:190px;
text-align:center;
vertical-align:top;
border-right-width : 1px;
border-right-style : dotted;
border-right-color : #665c50;
}

.li1{
margin:5px auto;
text-align : left;
letter-spacing: 0.1em;
line-height : 20px;
}
</style>


<TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR>
<TD id="td1" colspan="2">
<H2><font color="#DA70D6">a</font>b<font color="#DA70D6">c</font>d <font color="#DA70D6">e</font>f<font color="#DA70D6">g</font></H2>
</TD></TR><TR>
<TD id="left">

<h3>MENU</h3>
<UL class="li1">
<li><A href="main.html" target="main">1</A></li>
<li><A href="main.html" target="main">2</A></li>
<li><A href="main.html" target="main">3</A></li>
<li><A href="main.html" target="main">4</A></li>
</UL>
</TD>
<TD id="right">
(関係ないので中略)
</TD></TR><TR><TD id="td2" colspan="2"></TD></TR></TBODY></TABLE>

(動作環境はVista、IE8)

左右に2分割のレイアウトで、左側に上記のHTMLを反映させてます。
私がやりたいことはリストのタグのリンクをクリックして、タイトル(<h2>タグの箇所)の色を変更することです。
リンクごとに其々色を変えたく、タイトルに2色用いているように、変更後も同じ配列で2色できれば使いたい。

CSSはそこそこ知識はありますが、JavaScriptに関しては全くの素人です。
上記のように設定するにはどうしたらいいでしょうか?

投稿日時 - 2010-05-12 21:45:48

QNo.5890854

困ってます

質問者が選んだベストアンサー

まず、「リストのタグのリンクをクリックして」の処理は
イベントハンドラー関数の追加になります。
 簡単なのは、
 elemnt.onclick=function(){......}
です。
ターゲット色の変え方は、ターゲットの選択方法も考慮して、
個別に要素を指定して変えるなら
 element.style.color = "red";
で変えます。
あるいは、全色の色指定のCSSクラス定義を作っておいて、
 element.className ="red_class";
で摘要されるクラスを変えます。
 その要素に複数クラスが指定されていたり、他の処理で変えられたり
 している場合は、もうちょっと工夫する必要があります。
もう一つの方法は、CSS定義で定義したクラスのルールを書き換える
方法です。色のクラスを、2つだけ、作っておいて、定義内容(色指定)
を動的に書き換え(本当は追加)てしまう方法です。

ターゲットの選択方法は、文字を<span></span>でくくって、<span>に
name属性なり、クラス指定をして、
 document.getsElementBy~で配列取得します。

上記を応用して作ってみたら、いかがでしょうか

投稿日時 - 2010-05-13 11:23:25

お礼

お礼が遅くなりました。
若干手間取りましたが、おかげでできました。
ありがとうございました!

投稿日時 - 2010-05-15 00:08:04

ANo.3

このQ&Aは役に立ちましたか?

8人が「このQ&Aが役に立った」と投票しています

回答(7)

ANo.7

No.6続き=========
for(var i=0;i<result.length;i++){
var textelm=result[i].firstChild;
var textvalue="";
var regexp = new RegExp(/\S/);
while(textelm.nodeValue==null){textelm=textelm.nextSibling;}
var newelm=document.createElement('span');
for(var j=0;j<textelm.nodeValue.length;j++){
var char=textelm.nodeValue.substr(j,1);
var span = document.createElement('span');
if(char.match(regexp))span.className=(j%2==0)?class2:class1;
span.appendChild(document.createTextNode(char));
newelm.appendChild(span);
}
textelm.parentNode.replaceChild(newelm,textelm);
}
}

function chg_color_class(selector,color){
var property ="color:"+color+";";
var CssSheet;
if(document.styleSheets.length == 0){
CssSheet=document.styleSheets[0];
}else{
CssSheet=document.styleSheets[document.styleSheets.length-1];
}
var ruleindex=0;
var rules = CssSheet.rules || CssSheet.cssRules;
for(var i=rules.length - 1;i >= 0;i--){
if(rules[i].selectorText.toLowerCase()==selector){
ruleindex=i;
try{CssSheet.removeRule(ruleindex);}
catch(e){CssSheet.deleteRule(ruleindex);}
}
}
try{CssSheet.addRule(selector,property,CssSheet.rules.length);}
catch(e){CssSheet.insertRule(selector+"{"+property+"}",CssSheet.cssRules.length);}
}
// -->
</script>
</head>
<body>
<div id="hoge">
<div>
abcdefghi jklmn
</div>
<UL class="li1">
<li><A href="main.html" target="main" onclick="changeColor(0);return false;">1</A></li>
<li><A href="main.html" target="main" onclick="changeColor(1);return false;">2</A></li>
<li><A href="main.html" target="main" onclick="changeColor(2);return false;">3</A></li>
<li><A href="main.html" target="main" onclick="changeColor(3);return false;">4</A></li>
</UL>
</div>
<table>
<tr class="drink"><td>お茶</td></tr>
<tr class="food"><td>おにぎり</td></tr>
<tr class="drink"><td>ジュース</td></tr>
<tr class="food"><td>サンドイッチ</td></tr>
</table>
</body>
</html>

投稿日時 - 2010-05-14 15:43:09

お礼

こちらでも上手く作動できました!
回答ありがとうございました。

投稿日時 - 2010-05-15 00:10:18

ANo.6

まだ締め切ってないし、レスも無いので、
すでに作成してしまったHTMLの任意の要素以下に対して、テキストノードの文字を
交互に変えられるように作ってみた。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
<style type="text/css">
body {color:#000000;background-color:#E0FFFF;}
</style>
<script type="text/javascript" charset="utf-8">
<!--
var spanflg=false; // SPANをはずす部分を作らなかったので...
function changeColor(n){
var colorList = [['#f00','#0ff'],['#0f0','#00f'],['#00f','#f00'],['#000','#fff']];
var text_color_class0="text_color_0";
var text_color_class1="text_color_1";
var target_node=document.getElementById("hoge");
// var target_node=document.getElementsByTagName("body")[0];
if(!spanflg){
spanflg=!spanflg;
text_span_add(target_node,text_color_class0,text_color_class1);
}
chg_color_class("."+text_color_class0,colorList[n][0]);
chg_color_class("."+text_color_class1,colorList[n][1]);
}

function text_span_add(node,class1,class2){
var result=[];
(function(node,result){
var regexp = new RegExp(/\S+/);
for(var elm=node;elm;elm=elm.nextSibling){
if(elm.nodeType == 3 && elm.nodeValue.match(regexp)){
result.push(elm.parentNode);
}else{
if(elm.hasChildNodes()) arguments.callee(elm.firstChild,result);
}
}
})(node,result);

===続く===

投稿日時 - 2010-05-14 15:39:55

ANo.5

その2です。1につなげてください。


<script type="text/Javascript"><!--
//@cc_on @set @V = (@_jscript_version < 5.9)

var colorList = [
 [ '#f00', '#0ff' ],
 [ '#0f0', '#00f' ],
 [ '#00f', '#f00' ],
 [ '#000', '#fff' ]
];

var hoge = function ( color/*array*/ ) {
 return function ( e ) {
  var span, cnt = 0, o, f = false, i= 0;
  var t = o = e./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/.parentNode;
  if( 'LI' !== t.nodeName ) return;
  while( o = o.previousSibling ) cnt++;
  span = document.getElementById('bg2').getElementsByTagName('span');
  while( o = span[ i++ ] )
   o.style.color = color[ cnt ][ +(f=!f) ];
  return e./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/;
 };
};

var G = (function ( click ) {
 return function ( t ) { /*@if( @_jscript )
  t.fireEvent( 'onclick' ); @else@*/
  t.dispatchEvent( click ( t.ownerDocument ) ); //*@end
 };
})(
  function ( doc ) {
   var e = doc.createEvent( 'MouseEvent' );
   return ( e.initEvent( 'click', true, true ), e );
  });

//____

document.getElementById('bg2')./*@if( @V )
 attachEvent( 'on' + @else@*/
 addEventListener( /*@end@*/
  'click', hoge( colorList ), false );

G(document.getElementById('bg2').getElementsByTagName('a')[0]);
</script>

投稿日時 - 2010-05-13 11:56:27

お礼

お礼が遅くなりました。
こちらも参考にさせていただきました。
回答ありがとうございました。

投稿日時 - 2010-05-15 00:13:41

ANo.4

あまりHTMLとかCSSは、そこそこわかりませんが、こういうのはどうでしょう?
ぜんかくくうはくははんかくにしてくださいね
たぶん、ながそうなのでぶんかつです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<style type="text/css">
#bg2 { width:460px; background:#dedec2; border-right:1px #57450f solid; border-bottom:1px #57450f;
color:#665c50;font-size: small}
#bg2 h3 { height:1em; text-align:center;margin: 0 180px 0 0;}
#bg2 div { float:left; padding-left: 5px; }
#bg2 h2 { color:#98FB98; font: 69px impact; letter-spacing: 25px; margin:0 60px 0 10px;}
#bg2 ol { width:280px; border-right:1px #665c50 dotted; margin:0; }
#bg2 ol li{ margin-left: 20px; text-align: left; line-height: 20px; padding: 5px}
#bg2 p { background:#665c50; height:20px; text-align:right; margin:0;clear:both; }
</style>

<div id="bg2">
 <h2>
  <span>a</span>
  <span>b</span>
  <span>c</span>
  <span>d</span>
  <span>e</span>
  <span>f</span>
  <span>g</span>
 </h2>
 <h3>MENU</h3>
 <div>
  <ol>
   <li><a href="#">1</a>
   <li><a href="#">2</a>
   <li><a href="#">3</a>
   <li><a href="#">4</a>
  </ol>
 </div>
 <div>関係ない</div>
 <p>&nbsp</p>
</div>

投稿日時 - 2010-05-13 11:55:04

ANo.2

#1です。
誤りがあったので訂正します。

oSpans = oH2.document.getElementsByTagName("SPAN");

oSpans = oH2.getElementsByTagName("SPAN");

連投失礼しました;

投稿日時 - 2010-05-13 11:15:27

お礼

お礼遅くなって申し訳ありません。
大変、参考になりました!

投稿日時 - 2010-05-15 00:02:53

ANo.1

(中略)
.span1{
color : #DA70D6;
}
-->
</style>
<script type="text/javascript">
<!--
//カラーリスト["h2のcolor","spanのcolor"]の順・組み合わせ;
var aColorList = new Array();
aColorList[0] = ["red","purple"];
aColorList[1] = ["blue","green"];
aColorList[2] = ["brown","yellow"];
aColorList[3] = ["black","gray"];

var oH2,oSpans,i;
function changeColor(n) {
//nを-1する(配列は0~、nが1~なので)
--n;

//"h2id"をidに持つオブジェクトをoH2へ格納
oH2 = document.getElementById("h2id");
if(!oH2){return false;}

//oH2の子要素のspanを(複数)取り出してoSpansへ格納
oSpans = oH2.document.getElementsByTagName("SPAN");
if(!oSpans){return false;}

//H2のcolor変更
oH2.style.color = aColorList[n][0];

//oSpansをcolor変更
for( i in oSpans ) {
oSpans[i].style.color = aColorList[n][1];
}

}
//-->
</script>
</head>
<body>
<TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR>
<TD id="td1" colspan="2">
<H2 id="h2id"><span class="span1">a</span>b<span class="span1">c</span>d<span class="span1">e</span>f<span class="span1">g</span></H2>
</TD></TR><TR>
<TD id="left">
<h3>MENU</h3>
<UL class="li1">
<li><A href="main.html" target="main" onclick="changeColor(1);">1</A></li>
<li><A href="main.html" target="main" onclick="changeColor(2);">2</A></li>
<li><A href="main.html" target="main" onclick="changeColor(3);">3</A></li>
<li><A href="main.html" target="main" onclick="changeColor(4);">4</A></li>
</UL>
</TD>
<TD id="right">(関係ないので中略)</TD></TR>
<TR><TD id="td2" colspan="2"></TD></TR>
</TBODY></TABLE>
</body>
</html>


※便宜上つけたもの(お好みで変更してください)
span1,aColorList,oH2,oSpans,i,changeColor,n,
["h2のcolor","spanのcolor"]の組み合わせ

※fontの使用は非推奨なので止めましょう。

>タイトルに2色用いているように、変更後も同じ配列で2色できれば使いたい。

h2とspan(font)を決まった組み合わせの配色で変える、
という事で作りましたけれども合っていたでしょうか。

投稿日時 - 2010-05-13 11:10:49

あなたにオススメの質問