aタグの文字色を条件によって変えたい

Question

$genderの内容によってCHECKの色を変えたいのですが下記のコードでは色がかわりません

<p id='gender'><? php echo $gender; ?></p> <p id='check'><a href='list.php'>CHECK</a></p> <script> var gender = document.getElementById('gender').textContent; var check = document.getElementById('check').textContent; if(gender=='male'){ check.style.color = 'Blue'; }else if (gender=='female'){ check.style.color = 'Red'; } </script>

Answer 1

2点問題があります。

• リンクはデフォルトで文字色を持つので、IDがcheckのp要素の文字色を変えても、そのままではリンクの色が表示される。
• styleプロパティの対象はgetElementByIdで得られるElementオブジェクトなので、変数checkの設定値にtextContentを付けてはいけない。

さらに、次の点も考慮すべきでしょう。

• 変数genderの値は、HTMLファイルのインデントにより前後に空白文字(改行を含む)が付く可能性を考慮して、trim()で処理すべき。

#check a {
    color: inherit;
}

var gender = document.getElementById('gender').textContent.trim();
var check = document.getElementById('check');
if (gender == 'male') {
    check.style.color = 'Blue';
} else if (gender == 'female') {
    check.style.color = 'Red';
}

Answer 2

textContent は単なるテキストなので style プロパティはない。

id='check'に color を設定しても、a要素のデフォルトの color が優先される。

var gender = document.getElementById('gender').textContent; 
var check = document.getElementById('check');
if(gender=='male'){
  check.style.color = 'Blue';
}else if (gender=='female'){
  check.firstElementChild.style.color = 'Red';
}

あるいは、

var gender = document.getElementById('gender').textContent; 
var check = document.querySelector('#check > a');
if(gender=='male'){
  check.style.color = 'Blue';
}else if (gender=='female'){
  check.style.color = 'Red';
}

Comments

[makosama4493]

下段のコードで解決しました。自分の力では思いもつかないコードでした。ありがとうございました。