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

Answer 2

使用style.borderColor：

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

显示/隐藏包含div的边框？使用Javascript

2 个答案: