【基于HTML5的网页设计及应用】——改变文字和背景颜色

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux：​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

---

🎯功能简介

        这段代码实现的功能是让用户可以选择不同的文字样式，包括不同的背景色和文字颜色。用户可以通过单选按钮来选择不同的样式，选择不同的单选按钮会触发JavaScript中的`setColor()`函数，根据所选按钮的值改变`h1`元素的样式，从而实现所选样式的显示效果。整体来说，这段代码实现了一个简单的前端交互效果，让用户可以通过选择不同的样式来改变页面的外观。

🎯代码解析

<style>
    .txt1 {
        background-color: red;
        color: yellow;
    }

    .txt2 {
        background-color: green;
        /* color: #ccc; */
    }

    .txt3 {
        background-color: blue;
        color: white;
    }

    h1 {
        color: #f00;
    }
</style>

在这部分代码中，定义了三个类（.txt1, .txt2, .txt3）分别代表不同的背景色和文字颜色组合。此外，还设置了h1标签的文字颜色为红色。这些样式将在JavaScript中被应用到h1元素上。

<script>
    function setColor(){
        var h1 = document.getElementById("heading");
        var radio=document.getElementsByName("oColors");
        var checkedradio;
        for(var i=0;i<radio.length;i++){
            if(radio[i].checked){
                checkedradio=radio[i];
                break;
            }
        }
        switch(checkedradio.value){
            case "red":
                h1.className="txt1";
                break;
            case "green":
                h1.className="txt2";
                break;
            case "blue":
                h1.className="txt3";
                break;
        }
    }
</script>

这段JavaScript代码定义了一个setColor函数，用于根据用户选择的单选按钮来改变h1元素的样式。根据所选的单选按钮值，将h1元素的className属性设置为对应的类名（txt1, txt2, txt3），从而改变背景色和文字颜色。

<form id="form1" name="form1" method="post" action="">
    <p align="center">选择你喜欢的文字样式:
        <input type="radio" name="oColors" id="radio1" value="red" onclick="setColor();" /> 红背景，黄色文字
        <input type="radio" name="oColors" id="radio2" value="green" onclick="setColor();" /> 绿背景，红色文字
        <input type="radio" name="oColors" id="radio3" value="blue" onclick="setColor();" /> 蓝背景，白色文字
    </p>
</form>
<h1 id="heading" align="center" class="hh">我的班级是xxxx,我的姓名是xxx</h1>

在HTML部分，创建了一个包含三个单选按钮的表单，每个单选按钮用于选择不同的文字样式。当用户选择其中一个单选按钮时，onclick事件会触发setColor函数，从而改变h1元素的样式。

🎯核心代码

<form id="form1" name="form1" method="post" action="">
    <p align="center">选择你喜欢的文字样式:
        <input type="radio" name="oColors" id="radio1" value="red" onclick="setColor();" /> 红背景，黄色文字
        <input type="radio" name="oColors" id="radio2" value="green" onclick="setColor();" /> 绿背景，红色文字
        <input type="radio" name="oColors" id="radio3" value="blue" onclick="setColor();" /> 蓝背景，白色文字
    </p>
</form>
<h1 id="heading" align="center" class="hh">我的班级是xxxx,我的姓名是xxx</h1>

🎯效果展示