选中下拉菜单中的颜色,改变div中的背景颜色。选中单选框提示的颜色,改变div边框的颜色


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
  <style>
    .div1
    {
      border:5px solid #000000;
      width: 100px;
      height: 100px;
      background: rgb(235, 9, 178);
    }
  </style>
</head>
<body>
  <select name="" id="color">
    <option value="" selected="selected">---背景颜色---</option>
    <option value="violet">violet紫色</option>
    <option value="cyan">cyan青色</option>
    <option value="orange">orange橙色</option>
    <option value="gray">gray灰色</option>
  </select>
 
<div class="div1"></div>

 

  <input type="radio" name="BorderColor" value="red" />边框红
  <input type="radio" name="BorderColor" value="green" />边框绿
  <input type="radio" name="BorderColor" value="blue" />边框蓝
 
 

 

</body>
</html>
<script src="../jquery.js"></script>
<script type="text/javascript">
 
  $("#color").change(function(){
    $('#color option:selected');
    $('div').css('background',$(this).val());
  });

 

  $("input[name='BorderColor']").change(function(){
    $("div").css("border-color",$(this).val())
  });
</script>

效果图:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM