使用javascript和html選擇器更改div的邊框顏色和像素

-1

我很難搞清楚我在此過程中的下一步。我想要完成的是從下拉菜單中獲取顏色，並使用javascript將其附加到div元素。使用javascript和html選擇器更改div的邊框顏色和像素

任何幫助，將不勝感激。

<!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> 
<title>WebToMed Website Developer Test</title> 
<meta http-equiv="Content-Type" name="description" content="This is a simple CSS, HTML, and JS Test" /> 
    <style> 
    /* Add all CSS enteries here */ 
    .test-red{ 
    background-color: #ff0000; 
} 
.test-green{ 
    background-color: #008000; 
} 
.test-blue{ 
    background-color: #0000ff; 
} 
.test-yellow{ 
    background-color: #ffff00; 
} 
#div_1{ 
    float: left;width:300px;height: 50px;text-align: left; 
} 
#div_2{ 
    margin:0px width:100%;height: 50px;text-align: center; 
} 
#div_3{ 
    float: right; 
    width:350px; 
    height: 50px; 
    color: white; 
    text-align: right; 
} 
#div_4{ 
    text-align: center; 
    height: 300px; 
} 
#div_5{ 
    margin: 0 auto; 
    text-align: center; 
} 
#div_6{ 
    border:3px solid black; 
    margin-top: 10px; 
    padding:20px; 
} 
.container{ 
    column-count: 2; 

} 
#select-1{ 

} 

    </style> 

    <script> 
    /* Add any JavaScript here */ 
    var getDiv=function(){ 

    } 
    function changeBorder() { 
    document.getElementById("select-1").style.borderColor = document.getElementById("col-selc") 
} 

    </script> 
</head> 
<body> 


<!-- Modify this block of divs - START --> 
<div class="container"> 
    <div id="div_1" class="test-red">LEFT COL STATIC WIDTH 300px</div> 

    <div id="div_2" class="test-green">CENTER COL DYNAMIC WIDTH</div> 
    <div id="div_3" class="test-blue">RIGHT COL STATIC WIDTH 350px</div> 
</div> 
<div id="div_4" class="test-yellow"> 
    <div id="div_5"> 
    This text should be centered horizontally and vertically. 
    </div> 
</div> 
<div id="div_6"> 
    Div Selector: 
    <!-- Place Div Select Here --> 
    <select id=select-1> 
     <option class='1' vlaue=1>Div-1</option> 
     <option class='2' vlaue=2>Div-2</option> 
     <option class='3' vlaue=3>Div-3</option> 
     <option class='4' vlaue=4>Div-4</option> 
    </select> 

    <br /><br /> 
    Color Selector: 
    <!-- Place Color Select Here --> 
    <select id="col-selc"> 
     <option id="color1" class='1' vlaue=1>Gray-1</option> 
     <option class='2' vlaue=2>Gray-2</option> 
     <option class='3' vlaue=3>Gray-3</option> 
    </select> 
    <!-- Place "Change Color" Button Here --> 
    <button type="button" onclick="changeBorder()">Change Color</button> 
</div> 
<!-- Modify this block of divs - END --> 


<br /> 
<hr /> 
<div><strong>Your end result should look like this (do not modify anything below this line):</strong></div> 
<br /> 
<img src="http://careers-test.webtomed.com/assets/images/test.gif" width="1024" height="484" /> 

</body> 
</html>

來源

2016-08-15 Joel Carter

你需要在你的下拉式選單，選擇的項目的價值（這應該是一個實際的顏色）：

function changeBorder() { 
    var dropdown = document.getElementById("col-selc"); 
    var selectedColor = dropdown.options[dropdown.selectedIndex].value; 
    document.getElementById("select-1").style.borderColor = selectedColor; 
}

您也拼寫爲「價值」的錯誤隨處可見這樣可以防止這從工作

來源

2016-08-15 18:07:18 mcgraphix

使用javascript和html選擇器更改div的邊框顏色和像素

回答

相關問題