Question

一个基本的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>

Answer 1

问题在于JavaScript解析DOM节点的方式。 .style.color属性为空，因此，if-else-if梯子失控。

解决此问题的一种简单方法是：

header.style.color = ( header.style.color === '' || header.style.color === 'black' ) ? 'red' : 'black';

你可以看到小提琴here

然而，永久性（并且很可能是一个更好的修复）是使用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' );
}
...
...

然后根据它进行计算。

Answer 2

可能的解决方法是使用类。

#header {
  color: black;
}

#header.red {
  color:red;
}

然后将你的js改为

var header = document.getElementById('header');

header.addEventListener("click", function() {
  this.classList.toggle('red');
});

这是代码笔https://codepen.io/Mugen_Din/pen/ddXawV

使用EventHandler更改文本颜色的问题

2 个答案: