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

解決済

質問者：noname#117876
質問日時：2010/05/12 21:45
回答数：7件

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

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

以下に、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">１</A></li>
<li><A href="main.html" target="main">２</A></li>
<li><A href="main.html" target="main">３</A></li>
<li><A href="main.html" target="main">４</A></li>
</UL>
</TD>
<TD id="right">
（関係ないので中略）
</TD></TR><TR><TD id="td2" colspan="2"></TD></TR></TBODY></TABLE>

（動作環境はVista、IE8）

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2010/05/13 11:23

まず、「リストのタグのリンクをクリックして」の処理は

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/05/15 00:08

No.7

回答者： yyr446
回答日時：2010/05/14 15:43

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;">１</A></li>
<li><A href="main.html" target="main" onclick="changeColor(1);return false;">２</A></li>
<li><A href="main.html" target="main" onclick="changeColor(2);return false;">３</A></li>
<li><A href="main.html" target="main" onclick="changeColor(3);return false;">４</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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/05/15 00:10

No.6

回答者： yyr446
回答日時：2010/05/14 15:39

まだ締め切ってないし、レスも無いので、

すでに作成してしまった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);

＝＝＝続く＝＝＝

- 0
- 件

通報する

No.5

回答者： babu_baboo
回答日時：2010/05/13 11:56

その２です。

１につなげてください。

<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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/05/15 00:13

No.4

回答者： babu_baboo
回答日時：2010/05/13 11:55

あまり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>

- 0
- 件

通報する

No.2

回答者： zeff#1
回答日時：2010/05/13 11:15

#1です。

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

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

連投失礼しました；

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/05/15 00:02

No.1

回答者： zeff#1
回答日時：2010/05/13 11:10

（中略）

.span1{
color : #DA70D6;
}
-->
</style>
<script type="text/javascript">

</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);">１</A></li>
<li><A href="main.html" target="main" onclick="changeColor(2);">２</A></li>
<li><A href="main.html" target="main" onclick="changeColor(3);">３</A></li>
<li><A href="main.html" target="main" onclick="changeColor(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の使用は非推奨なので止めましょう。

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

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