使用 CSS 和 JavaScript 根据选择更改 div 的边框颜色答案

【问题标题】：Change Border Color of Div Based on Selection With CSS and JavaScript使用 CSS 和 JavaScript 根据选择更改 div 的边框颜色
【发布时间】：2017-11-11 13:53:13
【问题描述】：

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

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>

【问题讨论】：

jsfiddle.net/yt2u8z3w 这是一个适合你的小提琴;)
@mr.void 您为什么不将其粘贴为答案？
我的英语不好解释解决方案:(

标签： javascript jquery html css

【解决方案1】：

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】：

好的，我会尽力解释。

首先，您应该定义一个函数作为事件的事件处理程序。 DOM 元素会触发多个事件，例如按钮、div 等。

对于您的情况，我们想监听按钮的点击事件。（如果用户点击按钮，就会执行一个方法）

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

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

})

注意：我在您的标记中添加了一个“提交”类：

<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 用于删除之前可能添加的类。

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

【讨论】：

请检查我更新的网站 - 我已经添加了您的更改，但仍然没有得到想要的结果：blog.drawyourpets.com
您需要将代码包装在 document.ready 函数中，就像在我的小提琴示例中一样。如果您的浏览器已经完全渲染了 DOM，则会调用 document.ready，此时您可以使用 jQuery 修改 DOM
请再次检查我的网站 - 代码像您的小提琴示例一样包装。
div1 没有引用你的任何 id，你有 div_1

【解决方案3】：

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】：

选定的元素，

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";
      };
    });

【讨论】：