JS:实现颜色选择

最新推荐文章于 2023-06-14 09:52:32 发布

Mr顺

最新推荐文章于 2023-06-14 09:52:32 发布

阅读量2.7k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_46144237/article/details/108676122

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法1：switch

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>颜色判断1</title>
<script type="text/javascript">
<!--
  function setColor(sColor){
    var h3=document.getElementById("heading");
    switch(sColor){
	  case "red":
	    h3.style.color="red";  break;
	  case "green":
	    h3.style.color="green"; break;
	  case "blue":
	    h3.style.color="blue";  break;
	  }  	
  }
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p align="center">选择你喜欢的颜色:
    <input type="radio" name="oColors" id="radio1" value="red" onclick="setColor(this.value);" />
    红
    <input type="radio" name="oColors" id="radio2" value="green" onclick="setColor(this.value);" />
    绿
    <input type="radio" name="oColors" id="radio3" value="blue" onclick="setColor(this.value);" />
    蓝
  </p>
</form>
<h1 id="heading" align="center">JavaScript动态网页编程</h1>
</body>
</html>

方法2：if else+getElementById

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>颜色选择</title>
<script type="text/javascript">
<!--
  function setColor(){
    var h3=document.getElementById("heading");
	  if(document.getElementById("radio1").checked)
	      h3.style.color="red";
	  else if(document.getElementById("radio2").checked)
	      h3.style.color="green";
	  else h3.style.color="blue";

	}  	 
//-->
</script>
</head>

<body>
<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">JavaScript动态网页编程</h1>
</body>
</html>

方法3：if else+getElementsByTagName

<script type="text/javascript">
<!--
  function setColor(){
    var h3=document.getElementById("heading");
	//var ra=document.getElementsByName("oColors");
	//var ra=document.form1.oColors;
	var ra=document.getElementsByTagName("input");
	if(ra[0].checked)
	    h3.style.color="red";
	else if(ra[1].checked)
	    h3.style.color="green";
	else h3.style.color="blue";
	}  	
  
//-->
</script>
</head>

<body>
<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">JavaScript¶¯Ì¬ÍøÒ³±à³Ì</h1>
</body>
</html>

在这里插入图片描述

Mr顺

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS:实现颜色选择

<!doctype html><html><head><meta charset="utf-8"><title>颜色选择</title><script type="text/javascript"><!-- function setColor(){ var h3=document.getElementById("heading"); if(document.getElementById("
复制链接

扫一扫