javascript - 显示或隐藏 div 的边框 - Javascript？

Question

我有一个多部分表单来创建自定义图章。我的主要部分工作得很好，但我正在努力让边框采用与文本颜色选择相同的颜色。我有一个边框 px 的下拉列表和一个字体颜色的下拉列表。字体颜色有效，我需要边框有效并采用与字体颜色相同的颜色。你能告诉我我在这里做错了什么吗？

http://jsfiddle.net/ShauniD/ELER2/11/ (这是完整的代码，所以你可以看到我想要实现的目标。

我知道有更好的方法可以做到这一点，但我是新手，正在逐一学习。如果您愿意，请放轻松。

Javascript如下:

function setColor()   {     
var color = document.getElementById("color").value;     
document.getElementById("myDiv").style.color = color;   
} 
function addContent(divName, content) {
 document.getElementById(divName).innerHTML = content;
}
 function border(border)    {
document.getElementById("myDiv").style.borderWidth = border;
}

HTML 如下:

    <tr>

        <td>
            <input name="myContent1"></input>
            <input type="button" value="Add content" onClick="addContent('lineTwo', document.myForm.myContent1.value); setCookie('content', document.myForm.myContent1.value, 7);">
        </td>
</tr>
<tr><td>
 <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></td></tr> 
    <tr><td>
    <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></td></tr>
</form>

<div id="myDiv">
        <div id="lineOne"></div>
        <div id="lineTwo"></div>
        <div id="lineThree"></div>
        <div id="lineFour"></div>
    </div>

请查看完整代码，以了解我到底在做什么。

Answer 1

更改您的函数的名称，例如更改为“changeborder”，它将适用于您。

浏览器不同意使用与元素相同的名称。