divを含む境界線を表示/非表示にするには？ Javascript

Question

私はスタンプフォームを作成しようとしています/サイトのプレビューと非常に新しいjavascriptです。私はボーダーpxを色選択ボックスの色と同じ色で表示するように闘っています。

ジャバスクリプトは次のとおりです。

#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：：次のようにdivのための

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

CSSは

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> 

をあなたはどのように私に言うことができるしてください境界線の色をドロップダウンリストの色に変更するだけでなく、境界線を変更することもできます。 5pxと使用 -

Answer 1

あなたは、あなたが効果的に関連付けられた色を削除しますborderプロパティを変更することによりcolor<select/>

ためonChangeにborderColor

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

変更onclickを使用1pxに値を変更したいですborderWidth

dom eacを照会する代わりにh時間で、要素を変数にキャッシュすることができます。あなたは非常に実用的になりたい場合は、あなたもに渡すことでより多くのことを簡素化することができます

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

：すべて一緒にあなたがこのようなものに終わるだろうという置くvar myDiv = document.getElementById("myDiv");

スタイルプロパティー

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