показать/скрыть границу вокруг содержащей 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; 
} 

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> 

Пожалуйста, вы можете мне сказать, как для изменения границы px, а также изменения цвета рамки в цветовом выпадающем списке.

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 time, вы можете кэшировать элемент в переменной. 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; 
}