Question

我正在尝试创建一个JavaScript函数，允许我们根据选择更改div的边框颜色。如果用户选择Div 1和灰色1，则在点击color:#333333;后，Div 1的边框颜色将更改为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中为各种类分配选项？谢谢！

编辑当然，该脚本将放在<script>的{{1}}部分：

<head>

Answer 1

＆＃13;

function change() {  
  $('#' + $('#select-div').val()).css('border', '3px solid ' + $('#select-color').val());
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

好的，我会尝试解释。

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

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

如果您使用jQuery，可以轻松完成：

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

})

注意：我已经添加了＃34;提交＆＃34; -Class到您的标记：

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

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

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

注意：我添加了一个＆＃34; divSelect＆＃34;和＆＃34; colorSelect＆＃34; -Classes to your Markup：

<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/

Answer 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的样式。您可以在/*color selectors*/ <style>代码中的</style>后删除这些代码行。当我们执行此操作时，我们正在使用JavaScript执行“内联样式”：.style.borderColor="#333333";。顺便说一句，JavaScript样式通常类似于CSS样式，但出现在camelCase中。因此，JavaScript中的font-weight为fontWeight。echo。

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

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

4 个答案: