顯示/隱藏包含div的邊框嗎？ Javascript

Question

我想創建一個郵票表單/預覽的網站，我很新的JavaScript。我正在爭取讓邊框px以與顏色選擇框中相同的顏色顯示。

的JavaScript是：

function setColor() {  
var color = document.getElementById("color").value;  
document.getElementById("myDiv").style.color = color; 
} 
function border(border) { 
document.getElementById("myDiv").style.border = border; 
} 

是的div的CSS如下：

#myDiv { 
position:relative; 
width:100px; 
height:100px; 
float:left; 
overflow:hidden; 
border:1px solid #f1f1f1; 
text-align:center; 
} 

#lineOne { 
position:relative; 
padding:5px; 
} 

#lineTwo { 
position:relative; 
padding:5px; 
} 

#lineThree { 
position:relative; 
padding:5px; 
} 

#lineFour { 
position:relative; 
padding:5px; 
} 

和HTML像這樣：

Colour: 
    <select id="color" onclick="setColor();"> 
     <option value="white">white</option>   
     <option value="black" selected="selected">black</option>   
     <option value="red">red</option>   
     <option value="lightblue">light blue</option>   
     <option value="darkblue">dark blue</option>   
     <option value="lightgreen">light green</option>   
     <option value="darkgreen">dark green</option>   
     <option value="yellow">yellow</option>   
     <option value="orange">orange</option>   
     <option value="pink">pink</option>   
     <option value="purple">purple</option>   
     <option value="gray">gray</option>   
    </select> 

    <select id="border" onchange="border(this.value);"> 
     <option value="1px solid" selected="selected">1px</option> 
     <option value="2px solid">2px</option> 
     <option value="3px solid">3px</option> 
     <option value="4px solid">4px</option> 
     <option value="5px solid">5px</option> 
    </select> 


<div id="myDiv> 
    <div id="lineOne">Some text here</div> 
    <div id="lineTwo">Mores text here</div> 
    <div id="lineThree">And even more</div> 
    <div id="lineFour">And last text here</div> 

請你能告訴我怎麼更改邊框像素以及將邊框顏色更改爲顏色下拉選擇的邊框顏色。

Answer 1

你想用borderColor

function setColor() {  
    var color = document.getElementById("color").value; 
    document.getElementById("myDiv").style.borderColor = color; 
} 

變化onclick到onChange爲color<select/>

通過修改border屬性，您將有效地刪除相關的顏色，值更改爲1px - 5px和使用borderWidth

而不是查詢dom eac h時間，您可以將元素緩存在變量中。 var myDiv = document.getElementById("myDiv");

把所有在一起，你最終會像這樣的東西：

var myDiv = document.getElementById("myDiv"); 

function setColor(elem) { 
    myDiv.style.borderColor = elem.value; 
} 

function border(elem) { 
    myDiv.style.borderWidth = elem.value; 
} 

<select id="color" onchange="setColor(this);"> 
    <option value="white">white</option>   
    <option value="black" selected="selected">black</option>   
    <option value="red">red</option>   
    <option value="lightblue">light blue</option>   
    <option value="darkblue">dark blue</option>   
    <option value="lightgreen">light green</option>   
    <option value="darkgreen">dark green</option>   
    <option value="yellow">yellow</option>   
    <option value="orange">orange</option>   
    <option value="pink">pink</option>   
    <option value="purple">purple</option>   
    <option value="gray">gray</option>   
</select> 
<select id="border" onchange="border(this);"> 
    <option value="1px" selected="selected">1px</option> 
    <option value="2px">2px</option> 
    <option value="3px">3px</option> 
    <option value="4px">4px</option> 
    <option value="5px">5px</option> 
</select> 
<div id="myDiv"> 
    <div id="lineOne">Some text here</div> 
    <div id="lineTwo">Mores text here</div> 
    <div id="lineThree">And even more</div> 
    <div id="lineFour">And last text here</div> 
</div> 

Example on jsfiddle

如果你想成爲非常務實的，你甚至可以把它簡化更通過傳遞風格屬性

function setStyle(elem, prop){ 
    myDiv.style[prop] = elem.value; 
} 

Answer 2

使用style.borderColor：

function setColor() {  
    var color = document.getElementById("color").value;  
    document.getElementById("myDiv").style.borderColor = color; 
}