如何在 html 元素中点击另一个元素后切换样式

Question

在此动态 Web 应用程序中，如何通过单击复选框将文本从 为标题元素着色 更改为 取消标题元素着色 以及使用 toggle 方法在 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>

Answer 1

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

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

工作片段

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>

如何在 html 元素中点击另一个元素后切换样式

How to toggle style in a html element after a click event on another element

javascript

dom

dom-events

工作片段