gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:44:24 24 4
gpt4 key购买 nike

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

最佳答案

问题在于 JavaScript 解析 DOM 节点的方式。 .style.color 属性为空,因此 if-else-if 梯形图失去了控制权。

解决这个问题的一个简单方法是:

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

你可以看到 fiddle here

<小时/>

但是,永久的(并且很可能是更好的解决方案)是使用计算样式,它获取每个样式规则的计算属性值:

let color;
if( header.currentStyle ) { // IE, man!
color = header.currentStyle[ 'color' ];
} else if ( window.getComputedStyle ) {
color = document.defaultView.getComputedStyle( header, null ). getPropertyValue( 'color' );
}
...
...

然后据此进行计算。

关于javascript - 使用 EventHandler 更改文本颜色的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48637056/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com