WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:特定の文章の色を変えるjs

0:[投稿] 未来 [MAIL] [2002/05/01 16:34 ][環境:WIN+IE 不明]

初めまして。

checkboxをクリックすると、特定の文の文字色が変わるようなjavascriptが書けなくて困っています。
<INPUT TYPE=checkbox onclick="document.fgColor='#000000'">
のようにすると、全部の文字色が変わってしまうし……。

具体的には、箇条書き文の各文頭にcheckboxをつけて、クリックするとその直後の文章の色が変わるようにしたいと思っています。どなたかご存じでしたらよろしくおねがいします。


1:[回答] |-| [2002/05/01 22:30 ]

DOM1 を実装している最近のブラウザなら、こんな、感じで出来ます。

<head>
<script type="text/javascript">
<!--
function colorChg(chkbox,color) {
    if (chkbox.checked) chkbox.parentNode.style.color = color;
    else chkbox.parentNode.removeAttribute('style');
}
//-->
</script>
</head>

<body>

<ul>
    <li>
        <label for="color1">
            <input type="checkbox" value="color1"
            name="color1" id="color1" onclick="colorChg(this,'red')">color1
        </label>
    </li>
    <li>
        <label for="color2">
            <input type="checkbox" value="color2"
            name="color2" id="color2" onclick="colorChg(this,'blue')" >color2
        </label>
    </li>
</ul>

</body>


2:[回答] |-| [2002/05/01 22:30 ]

DOM1 を実装している最近のブラウザなら、こんな、感じで出来ます。

<head>
<script type="text/javascript">
<!--
function colorChg(chkbox,color) {
    if (chkbox.checked) chkbox.parentNode.style.color = color;
    else chkbox.parentNode.removeAttribute('style');
}
//-->
</script>
</head>

<body>

<ul>
    <li>
        <label for="color1">
            <input type="checkbox" value="color1"
            name="color1" id="color1" onclick="colorChg(this,'red')">color1
        </label>
    </li>
    <li>
        <label for="color2">
            <input type="checkbox" value="color2"
            name="color2" id="color2" onclick="colorChg(this,'blue')" >color2
        </label>
    </li>
</ul>

</body>


3:[完了] 未来 [2002/05/02 00:21 ]

ありがとうございます。
簡単な問題だと思って気軽に質問してしまったのですが、
意外と面倒だったんですね。
わざわざ申し訳ありません。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World