显示/隐藏包含div的边框？ Java脚本

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>

请您告诉我如何更改边框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。 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>

jsfiddle上的示例

如果您想变得非常务实，则可以通过传入style属性来进一步简化它

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