Fatal编程技术网

Javascript 用onclick更改h2

javascript html

Javascript 用onclick更改h2,javascript,html,Javascript,Html,我是JavaScript新手。我的代码需要帮助。现在，label_1和label_2中的字体和颜色正在更改。我只想h2更改div类任务框下的颜色和字体。我应该如何进行 函数交换\u颜色\u和\u字体（）{ document.getElementById（“标签1”）.style.color=“红色”； document.getElementById（“label_2”）.style.fontFamily=“courier”； } 改变字体和颜色 Lorem ipsum dolor sit a

我是JavaScript新手。我的代码需要帮助。现在，
label_1
和
label_2
中的字体和颜色正在更改。我只想
h2
更改div类
任务框下的颜色和字体。我应该如何进行



函数交换\u颜色\u和\u字体（）{
document.getElementById（“标签1”）.style.color=“红色”；
document.getElementById（“label_2”）.style.fontFamily=“courier”；
}



改变字体和颜色
Lorem ipsum dolor sit amet

“我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是


这是一个HTML和js理解错误。

首先，使用而不是，因为它很容易维护


document.querySelector（）
获取一个字符串参数，它是一个类似CSS使用的标识符

所以这里我们想改变我们的h2标签，把“h2”放在param中。
也许使用HTML id更好（请参阅教程）

顺便说一句，不要像这样使用

标记。更喜欢使用CSS（请参阅教程）



//如果javascript代码不在其他文档中，那么它应该在脚本标记中
函数交换\u颜色\u和\u字体（）{
document.querySelector（“h2”）.style.color=“红色”；
document.querySelector（“h2”）.style.fontfamine=“courier”；
}



改变字体和颜色
Lorem ipsum dolor sit amet

“我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是

字体颜色



字体




您的HTML中有一些损坏的标记，而您的Javascript不在脚本标记中。
您可以向h2元素添加一个“id”，并使用“getElementById”选择它，或者使用“querySelector”函数。确保正确关闭“任务盒”分区。
下面是一个固定的示例：


<!DOCTYPE html>
<html>
<head>
    <title>Stackoverflow Example</title>
</head>
<body>
    <div class="task_box"> <!-- Start of div class with classname 'task_box' -->
        <h2 id="h2-with-id">Change font and color</h2>              
        <p> Lorem ipsum dolor sit amet </p>                 
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud"Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

        <form> 
            <fieldset>
                <!-- Make sure to properly define the label tags -->
                <label for="font_color" id="label_1">Label 1</label><br/>
                <input type="text" id="font_color" value=""/><br/>
                <label for="font_color" id="label_2">Label 2</label><br/>
                <input type="text" id="font_family" value=""/><br/>
                <input onclick="swap_color_and_font()" value="Change font and color" type="button"/>
            </fieldset> 
        </form>
    </div> <!-- End of div class with classname 'task_box' -->

    <div class="task_box">
        <h2>Second H2</h2>
    </div>

    <!-- Create a Script tag to add Javascript code in document -->
    <script> 
        function swap_color_and_font() { 
            // Get Element By ID 
            document.getElementById("h2-with-id").style.color="red";
            
            // Get Element by Query Selection (Select all h2 elements within the class 'task_box')
            document.querySelector(".task_box h2").style.fontFamily="courier";

            // Loop trough all h2 elements that are in classes 'task_box'
            var allH2Elements = document.querySelectorAll(".task_box h2");
            allH2Elements.forEach(function(h2Element) {
                h2Element.style.color="red";
                h2Element.style.fontFamily="courier";
            });
        }
    </script>
</body>
</html>




堆栈溢出示例
改变字体和颜色
Lorem ipsum dolor sit amet

“我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是，我的知识是

标签1



标签2



第二个H2
函数交换颜色和字体（）
//按ID获取元素
document.getElementById（“带id的h2”）.style.color=“红色”；
//按查询选择获取元素（选择类“task\u box”中的所有h2元素）
document.querySelector（“.task_box h2”）.style.fontfamine=“courier”；
//通过类“任务盒”中的所有h2元素循环
var allH2Elements=document.queryselectoral（“.task_框h2”）；
所有h2Element.forEach（函数（h2Element）{
h2Element.style.color=“红色”；
h2Element.style.fontfamine=“courier”；
});
}

Hi，您在哪里定义了label_1和label_2？现在是否输入了正确的代码检查您的html您有一些错误谢谢帮助。但是，如果我的代码中有更多的h2，并且希望所有h2都改变，我该如何做呢？用
document.querySelector（）
替换
document.querySelector（）
，谢谢您的帮助。但是，如果我的代码中有更多的“tast_box”和h2，并且希望所有h2都改变，那么我该如何做呢？我已经通过调用“querySelectorAll”更新了示例，该调用将返回找到的元素列表。您可以循环浏览它们并更改样式。”getElementById“应该只找到一个精确的元素。”querySelector“查找匹配的第一个元素。”querySelectorAll'找到所有匹配项。它现在可以工作了，非常感谢您的帮助！！！