javascript - 显示/隐藏包含 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>

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

Example on jsfiddle

如果你想非常务实，你甚至可以通过传入样式属性来进一步简化它

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