堆栈内存溢出
  繁体   English   中英

基于CSS和JavaScript选择改变Div的边框颜色

[英]Change Border Color of Div Based on Selection With CSS and JavaScript

 原文  2017-06-09 13:52:23  7   4    javascript/ jquery/ html/ css

问题描述

我正在尝试创建一个JavaScript函数，允许我们根据我们的选择更改div的边框颜色。 如果用户选择Div 1和Gray 1，则Div 1的边框颜色将变为color:#333333; 在击中Make Change 。

HTML： 

<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select>
<option>Div 1</option>
<option>Div 2</option>
<option>Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select>
<option>Gray 1</option>
<option>Gray 2</option>
<option>Gray 3</option>
</select>
<!-- Place "Change Color" Button Here -->
<button>Change Color</button>
</div>

CSS： 

    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }

因此该函数将需要访问这些ID。 请在此处查看整个代码/网站：

http://blog.drawyourpets.com/

在创建这个功能时我甚至迷失了。 我是否需要在HTML中为各种类分配选项？ 谢谢！

编辑当然，脚本将放在<head>的<script>部分： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This is a simple CSS, HTML, and JS Test"/>
<title>WebToMed Website Developer Test</title>
<style>
/* Add all CSS enteries here */
    #div_1 {
    background: red;
    display: table-cell;
    text-align: left;
    width: 300px;
    height: 50px;
    }
    #div_2 {
    background: green;
    display: table-cell;
    text-align: center;
    height: 50px;
    }
    #div_3 {
    background: blue;
    display: table-cell;
    text-align: right;
    width: 350px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
    height: 50px;
    }
    #div_4 {
    background: yellow;
    display: flex;
    text-align: center;

    height: 300px;
    }
    #div_5 {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    }
    #div_6 {
    border: 3px solid black;
    margin-top: 10px; 
    padding: 20px;         
    }
    .container {
    display: table;
    width: 100%;
    }
    /*color selectors*/
    #Gray1 {
    color:#333333;
    }
    #Gray2 {
    color:#777777;
    }
    #Gray3 {
    color:#CCCCCC;
    }
   </style>
<script>
/* Add any JavaScript here */
</script>
</head>
<body>

4 个解决方案

解决方案1
 2  2017-06-09 14:08:06

 function change() { $('#' + $('#select-div').val()).css('border', '3px solid ' + $('#select-color').val()); } 
 #div_1 { background: red; display: table-cell; text-align: left; width: 300px; height: 50px; } #div_2 { background: green; display: table-cell; text-align: center; height: 50px; } #div_3 { background: blue; display: table-cell; text-align: right; width: 350px; color: #ffffff; font-weight: bold; text-decoration: underline; height: 50px; } #div_4 { background: yellow; display: flex; text-align: center; height: 300px; } #div_5 { margin-top: auto; margin-bottom: auto; margin-right: auto; margin-left: auto; } #div_6 { border: 3px solid black; margin-top: 10px; padding: 20px; } .container { display: table; width: 100%; } /*color selectors*/ #Gray1 { color: #333333; } #Gray2 { color: #777777; } #Gray3 { color: #CCCCCC; } .output { margin-top: 20px; } .output > div { display: inline-block; width: 100px; height: 50px; margin: 10px; border: 3px solid #000; padding: 20px; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div_6"> Div Selector: <select id="select-div"> <option value="div1">Div 1</option> <option value="div2">Div 2</option> <option value="div3">Div 3</option> </select> <br /><br /> Color Selector: <select id="select-color"> <option value="#777">Gray #555</option> <option value="#999">Gray #999</option> <option value="#AAA">Gray #BBB</option> </select> <button onClick="change();">Change Color</button> <div class="output"> <div id="div1">div 1</div> <div id="div2">div 2</div> <div id="div3">div 3</div> </div> </div>

解决方案2
 2  2017-06-09 14:16:02

好的，我会尽力解释。

首先，您应该定义一个函数，它充当事件的Eventhandler。 DOM-Elements触发了多个事件，如按钮，div等。

对于您的情况，我们希望监听按钮的单击事件。 （如果用户点击按钮，则执行方法）

如果你使用jQuery，这很容易做到： 

$('.submit').on('click', () => {

})

注意：我已经为你的Markup添加了一个“submit”类： 

<button class="submit">Change Color</button>

在下一步中，我们需要用户通过选择选择的值。 使用jQuery，这可以这样做： 

var idOfDiv = $('.divSelect option:selected').val();
var selectedGrayClass = $('.colorSelect option:selected').val();

注意：我已将“divSelect”和“colorSelect”类添加到您的标记中： 

<select class="divSelect">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select class="colorSelect">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>

注意：colorSelect选择中定义的值应该引用一些css类： 

.gray1 {border:1px solid gray}
.gray2 {border:1px solid #222}
.gray3 {border:1px solid #ccc}

在最后一步，我们应用我们从选择中读取的数据： 

$('#'+idOfDiv).removeClass().addClass(selectedGrayClass);

注意：removeClass用于删除之前可能添加的Class。

完整的解决方案： https ： //jsfiddle.net/yt2u8z3w/

解决方案3
 2 已采纳  2017-06-09 19:18:44

1.）为您的options分配值，为您在HTML中的selects分配ID： 

<div id="div_6">
Div Selector:
<!-- Place Div Select Here -->
<select id="div">
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
<option value="div3">Div 3</option>
</select>
<br /><br />
Color Selector:
<!-- Place Color Select Here -->
<select id="colors">
<option value="gray1">Gray 1</option>
<option value="gray2">Gray 2</option>
<option value="gray3">Gray 3</option>
</select>

2.）在<script> </script>标记内创建JavaScript函数。 声明你的变量： 

<script>
/* Add any JavaScript here */

function changecolor(){
/*gets selected value within select with ID "div"*/
var selectedvalue = document.getElementById("div").value;
/*gets selected value within select with ID "colors"*/
var selectedcolor = document.getElementById("colors").value;

3.）创建If ， Else If语句根据选择声明边框样式： 

if(selectedvalue == "div1" &&  selectedcolor == "gray1"){
      document.getElementById("div_1").style.borderColor="#333333";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray1"){
      document.getElementById("div_2").style.borderColor="#333333";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray1"){
      document.getElementById("div_3").style.borderColor="#333333";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" &&  selectedcolor == "gray2"){
      document.getElementById("div_1").style.borderColor="#777777";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray2"){
      document.getElementById("div_2").style.borderColor="#777777";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray2"){
      document.getElementById("div_3").style.borderColor="#777777";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
else if(selectedvalue == "div1" &&  selectedcolor == "gray3"){
      document.getElementById("div_1").style.borderColor="#CCCCCC";
      document.getElementById("div_1").style.borderWidth ="3px";
      document.getElementById("div_1").style.borderStyle ="solid";
}
else if(selectedvalue == "div2" &&  selectedcolor == "gray3"){
      document.getElementById("div_2").style.borderColor="#CCCCCC";
      document.getElementById("div_2").style.borderWidth ="3px";
      document.getElementById("div_2").style.borderStyle ="solid";
}
else if(selectedvalue == "div3" &&  selectedcolor == "gray3"){
      document.getElementById("div_3").style.borderColor="#CCCCCC";
      document.getElementById("div_3").style.borderWidth ="3px";
      document.getElementById("div_3").style.borderStyle ="solid";
}
};

</script>

没有必要使用CSS声明ID的样式。 您可以删除<style> </style>标记中/*color selectors*/之后的行。 当我们这样做时，我们用JavaScript做“内联样式”： .style.borderColor="#333333"; 。 顺便说一句，JavaScript样式通常类似于CSS样式，但出现在camelCase中。 所以CSS中的font-weight = JavaScript中的fontWeight 。

解决方案4
 1  2019-07-02 16:37:29

选中的元素， 

document.querySelector('my_element_tag').onclick = function(){
   document.querySelector('my_element_tag_for_change_color').style.border = "1px solid #333";
};

或者如果你有很多元素 

 document.querySelectorAll('my_element_tag').forEach(function(element){
       element.onclick = function(){ 
           element.style.border = "1px solid #333";
      };
    });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 javascript 更改 bootstrap-div 边框颜色 根据Angular 4中的页面选择更改div的颜色 有没有办法用 css 改变 div 边框的文本颜色？ 也许很棘手！ 更改CSS中选择的颜色 更改边框颜色Javascript CSS div样式，javascript画布颜色更改 Javascript根据变量更改HTML div颜色 使用 Javascript 更改没有按钮的 div 上的边框颜色 如何更改div中的边框颜色？ Javascript / CSS：动态更改HTML元素的边框颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM