函数.bind()的事件触发器问题

Question

大家下午好，我有激活此功能的问题：function clickMe(){return this.color="red"}，位于对象内部。它应该由按钮触发，这里的代码是：

script>
var btn = document.querySelector("#btn");
var txt = document.querySelector("#txt");
btn.addEventListener("click",activeNewColor)

var objCss ={fontsize:"40px",
color:"pink",
click: function clickMe(){return this.color="red"}
}
let colorRed=objCss.click.bind(objCss);

var activeNewColor= () =>{
return colorRed()
}
//activeNewColor()
Object.assign(txt.style, objCss); 
</script>

Answer 1

这样？

function buttonClicked() {
const txt = document.getElementById('txt');
txt.style.color = 'red';
}

button {
color: green;
}
textarea {
width: 100%;
height: 100px;
font-size: 40px;
color: pink;
}

<div><button id="btn" onclick="buttonClicked()">Click me</button></div>
<textarea id="txt">Example text</textarea>

Answer 2

您可以使用不同的类来赋予样式属性，并使用classList.toggle从元素中删除/添加类，如下所示：

var txt = document.querySelector("#txt");
function changeColor() {
txt.classList.toggle('pink');
txt.classList.toggle('red');
}

#txt {
font-size: 14px;
}
#txt.pink {
color: pink;
}

#txt.red {
color: red;
}

<button id="btn" onclick="changeColor()">Change text color</button>
<span id="txt" class="pink">text</span>