当前位置：首页 > news >正文

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

news 2025/9/11 8:59:12

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_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>