如何在另一个元素上的单击事件后切换 html 元素中的样式答案

【问题标题】：How to toggle style in a html element after a click event on another element如何在另一个元素上的单击事件后切换 html 元素中的样式
【发布时间】：2021-11-12 04:18:58
【问题描述】：

在此动态 Web 应用程序中，如何通过单击复选框将文本从 标题元素着色 更改为 取消标题元素着色，并在 Javascript 代码中使用切换方法。

预期输出是：

这是我尝试过的代码：

let myContainer = document.getElementById("myContainer");

function onTextAndColorChange(checkboxInput, labelId, headingId) {
    let checkboxElement = document.getElementById("checkboxInput");
    console.log(checkboxElement.checked);
    
    let labelElement = document.getElementById("labelId");
    /* I think the toggle method was implement here */
    
    let headingElement = document.getElementById("headingId");
    headingElement.classList.toggle("checked");
    
    
    
}



let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id = "checkboxInput";
inputElement.onclick = function() {
    onTextAndColorChange(checkboxInput, labelId, headingId);
};
myContainer.appendChild(inputElement);

let labelElement = document.createElement("label");
labelElement.setAttribute("for", "checkboxInput");
labelElement.textContent = "Color the heading element";
labelElement.id = "labelId";
myContainer.appendChild(labelElement);

let headingElement = document.createElement("h1");
headingElement.textContent = "heading Element";
headingElement.classList.add("heading");
headingElement.id = "headingId";
myContainer.appendChild(headingElement);

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="myContainer"></div>
</body>

</html>

【问题讨论】：

标签： javascript dom dom-events

【解决方案1】：

使用textContent属性更改函数中的标签文本：

labelElement.textContent = checkboxElement.checked 
    ? "Uncolor the heading element" 
    : "Color the heading element";

工作sn-p

let myContainer = document.getElementById("myContainer");

function onTextAndColorChange(checkboxInput, labelId, headingId) {
    let checkboxElement = document.getElementById("checkboxInput");
    console.log(checkboxElement.checked);
    
    let labelElement = document.getElementById("labelId");
    labelElement.textContent = checkboxElement.checked 
        ? "Uncolor the heading element" 
        : "Color the heading element";
    
    let headingElement = document.getElementById("headingId");
    headingElement.classList.toggle("checked");
   
}

let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id = "checkboxInput";
inputElement.onclick = function() {
    onTextAndColorChange(checkboxInput, labelId, headingId);
};
myContainer.appendChild(inputElement);

let labelElement = document.createElement("label");
labelElement.setAttribute("for", "checkboxInput");
labelElement.textContent = "Color the heading element";
labelElement.id = "labelId";
myContainer.appendChild(labelElement);

let headingElement = document.createElement("h1");
headingElement.textContent = "heading Element";
headingElement.classList.add("heading");
headingElement.id = "headingId";
myContainer.appendChild(headingElement);

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="myContainer"></div>
</body>

</html>

【讨论】：