選中下拉菜單中的顏色,改變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