🎃个人专栏:
🐬 算法设计与分析:算法设计与分析_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>