无法更改 TD 的边框颜色
用JS设置TD的背景色就可以了。但是，在 FF 3.0.18 中设置边框颜色是有问题的，尽管 IE 6 不会遇到此问题。 FF 存在问题，因为它要求 TD 元素的属性 style 初始化为 border-style:solid。如果没有它，设置 TD 的边框颜色将不起作用。这是已知的错误吗？
如何在不设置 style 属性以及初始化值的情况下设置边框颜色？
我知道另一个技巧，即设置 class 属性，而不是直接设置边框颜色。这是否表明 TD 讨厌动态设置边框颜色？这也众所周知吗？
有问题的代码如下（目标是找出为什么当我采用上述技巧时，设置简单真理1的边框颜色不起作用，而简单真理3却有效） :
<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
document.getElementById('simple').style.backgroundColor='yellow';
document.getElementById('simple2').style.backgroundColor='yellow';
document.getElementById('simple3').style.backgroundColor='yellow';
}
function quirk(id)
{
var x = document.getElementById(id);
x.style.border = '2px solid red';
}
</script>
</head>
<body>
<input type="button" onclick="changeBgColor()" value="Change background color"/>
<input type="button" onclick="quirk('simple')" value="Change border color 1"/>
<input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
<input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
<table>
<tr><td id="simple">Simple truth 1</td></tr>
</table>
<table>
<tr><td><span id="simple2">Simple truth 2</span></td></tr>
<table>
<tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
</table>
</body>
</html>
Using JS to set the background color of a TD is fine. But, setting the border color is problematic in FF 3.0.18 although IE 6 doesn't experience this. FF is problematic in that it requires the TD element to have an attribute style initialized to border-style: solid. Without that, setting border color of a TD won't work. Is this known bug?
How do I set the border color without having to set style attribute as well as the initialization value?
I know another trick of setting the class attribute instead of setting the border color directly. Is this an indication that somehow TD hates having its border color set dynamically? Is this known as well?
The problematic code is below (the goal is find out why setting the border color of simple truth 1 does not work while simple truth 3 works when I employ the trick described above):
<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
document.getElementById('simple').style.backgroundColor='yellow';
document.getElementById('simple2').style.backgroundColor='yellow';
document.getElementById('simple3').style.backgroundColor='yellow';
}
function quirk(id)
{
var x = document.getElementById(id);
x.style.border = '2px solid red';
}
</script>
</head>
<body>
<input type="button" onclick="changeBgColor()" value="Change background color"/>
<input type="button" onclick="quirk('simple')" value="Change border color 1"/>
<input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
<input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
<table>
<tr><td id="simple">Simple truth 1</td></tr>
</table>
<table>
<tr><td><span id="simple2">Simple truth 2</span></td></tr>
<table>
<tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
</table>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我相信这是一个错误。正如您已经指出的，解决方法是将边框样式设置为实心。您可以将其添加到样式表中，以便 TD 始终被初始化：
TD { border-style: Solid; }
I believe it's a bug. As you've already indicated, the workaround is to set border-style to solid. You could add it to the stylesheet so that TD is always initialized:
TD { border-style: solid; }
这不是一个错误，每个像样的浏览器都会要求您设置边框的所有三个值 - 颜色、样式（实线、虚线等）和像素宽度。如果缺少一个或多个属性，则结果可能会有所不同。
您需要在 JS 中设置所有三个属性才能正确显示边框。不过，不需要初始化 (CSS) 值。
此外，您始终可以通过 border-width、border-style、border-color 分别设置边框属性：
http://www.comptechdoc.org/independent/web/cgi/ javamanual/javastyle.html
it's not a bug, every decent browser will require you to set all three values for border - color, style (solid, dashed etc.) and pixel width. if one or more attributes are missing, then results can vary.
you need to set all three attributes in JS to display the border correctly. no initialization (CSS) value is required, though.
moreover, you can always employ setting the border attributes separately via border-width, border-style, border-color:
http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html