ここから本文です

以下ソースですと、"moji2~"だけではなく、div要素全ての文字の色が変わってしま...

mar********さん

2018/2/1023:00:13

以下ソースですと、"moji2~"だけではなく、div要素全ての文字の色が変わってしまいます。

「文字の色を変える」を押下した際、「div id="mojiX"」のみ文字の色が変わるソースを作成したいのですが、
どなたかご教授いただけませんでしょうか。何卒よろしくお願い申し上げます。

--------------------------------------------
<span onclick=" var items = document.querySelectorAll( 'div[ id ]' ); for(var i=0;i<items.length;i++){ items[ i ].style.color='#ffcc66'} ">文字の色を変える</span>

<div id="moji2" style="padding: 1px; background: #FFFFFF; border-radius: 3px; color: #000000;" onclick=" document.getElementById('moji2').style.background='#FFFFFF';document.getElementById('moji2').style.color='#000000';">test1</div>

<div id="moji3" style="padding: 1px; background: #FFFFFF; border-radius: 3px; color: #000000;" onclick=" document.getElementById('moji3').style.background='#FFFFFF';document.getElementById('moji3').style.color='#000000';">test1</div>

<div id="moji4" style="padding: 1px; background: #FFFFFF; border-radius: 3px; color: #000000;" onclick=" document.getElementById('moji4').style.background='#FFFFFF';document.getElementById('moji4').style.color='#000000';">test1</div>


--------------------------------------------

閲覧数:
15
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

ois********さん

2018/2/1023:48:18

取得した <div> の id をチェックして、
id="moji○" 以外の <div> は処理せずスキップすればいいだけ。
あと、
<div id="moji2"> とかで、
onclick 属性の中では、その要素自身には this でアクセスできるんで、
document.getElementById() は使わずに this にした方が楽。

━━━━━━━━━━━━━━━━
<span onclick="
var items = document.querySelectorAll( 'div' );
for( var i=0; i<items.length; i++ ){
/**** id='mojiX' 以外をスキップ ****/
if( ! /\b(moji\d)\b/.test( items[ i ].id ) ){ continue }
items[ i ].style.color = '#ffcc66';
}
">文字の色を変える</span>

<div id="moji2" style="
padding: 1px;
background: #FFFFFF;
border-radius: 3px;
color: #000000;
" onclick="
this.style.background = '#FFFFFF';
this.style.color='#000000';
">test1</div>

<div id="moji3" style="
padding: 1px;
background: #FFFFFF;
border-radius: 3px;
color: #000000;
" onclick="
this.style.background = '#FFFFFF';
this.style.color = '#000000';
">test1</div>


<div id="moji4" style="
padding: 1px;
background: #FFFFFF;
border-radius: 3px;
color: #000000;
" onclick="
this.style.background = '#FFFFFF';
this.style.color = '#000000';
">test1</div>
━━━━━━━━━━━━━━━━

  • ois********さん

    2018/2/1023:53:18

    ちなみに、

    ━━━━━━━━━━━━━━━━
    var items = document.querySelectorAll( 'div[ id^=\'moji\' ]' );
    ━━━━━━━━━━━━━━━━

    のように、
    セレクタによる制限で
    id="moji○" だけを取得する方法もあるけど、
    この場合、
    id="moji2" のような <div> だけじゃなく、
    id="mojibox" のような "moji" で始まる <div> も
    すべて取得してしまうんで、
    <div> を取得したあと、
    正規表現 /\b(moji\d)\b/ で id を絞り込む方法にした。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2018/2/11 01:34:03

oishii_mahouさま
ご回答誠にありがとうございます。
解決致しました。大変大変助かりました。
ご丁寧にご説明までして頂き誠にありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる