使用EventHandler更改文本顏色的問題
[英]Issue with changing color of text using EventHandler
問題描述
一個基本的JavaScript代碼，允許一段文本在單擊時更改顏色。 但是，文本似乎根本沒有改變顏色。 如果有人可以幫助我，將不勝感激。
基本的JavaScript代碼，其中元素在單擊時會更改顏色。 但是，它似乎不適用於我。
var header = document.getElementById('header'); header.addEventListener("click", function() { if(header.style.color === 'black') { header.style.color = 'red'; } else if(header.style.color === 'red') { header.style.color = 'black'; } });
#header { color:black; }
<body> <p id="header">Header</p> </body>
2 個解決方案
解決方案1
0 已采納 2018-02-06 06:57:56
問題在於JavaScript解析DOM節點的方式。 .style.color屬性為空白，因此if-else-if梯形圖落入控件。
解決此問題的簡單方法是：
header.style.color = ( header.style.color === '' || header.style.color === 'black' ) ? 'red' : 'black';
你可以在這里看到小提琴
但是，永久的（很可能是更好的解決方法）是使用computed styles ，該樣式將為每個樣式規則獲取計算的屬性值：
let color;
if( header.currentStyle ) { // IE, man!
color = header.currentStyle[ 'color' ];
} else if ( window.getComputedStyle ) {
color = document.defaultView.getComputedStyle( header, null ). getPropertyValue( 'color' );
}
...
...
然后基於此進行計算。
解決方案2
0 2018-02-06 07:14:04
可能的解決方法是使用類。
#header {
color: black;
}
#header.red {
color:red;
}
然后將您的js更改為
var header = document.getElementById('header');
header.addEventListener("click", function() {
this.classList.toggle('red');
});
使用 javascript 更改文本顏色的奇怪問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.