JavaScript 中的 CSS 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8182478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS border in JavaScript
提问by Sowmya
I am using below procedure to modify CSS from JavaScript but it is not giving any result.
我正在使用以下过程从 JavaScript 修改 CSS，但它没有给出任何结果。
Can anybody please check the code and let me know the proper method. I need border for the table with radius.
任何人都可以检查代码并让我知道正确的方法。我需要带有半径的表格边框。
This is my table structure:
这是我的表结构：
<table id="tt" width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="179" class="header_links">5<input name="input" class="lang_textbox" type="text" value="Search by keyword" /></td>
<td width="52" align="left"><img src="images/search_go.jpg" width="28" height="24" alt="go" /></td>
<td width="169" class="header_links"><a href="#">FAQs</a> | <a href="#">Sitemap</a> | <a href="#">Contact us</a></td>
</tr>
</table>
And below is the javascript which am using
下面是正在使用的javascript
document.getElementById('tt').style.borderRadius = '4em'; // w3c
document.getElementById('tt').style.MozBorderRadius = '4em'; // mozilla
document.getElementById('tt').style.border = '4em'; // mozilla
回答by Jared Farrish
You've got to set the border itself (and note borderis not a Mozilla-only property):
您必须设置边框本身（注意border不是 Mozilla 独有的属性）：
document.getElementById('tt').style.border = '4em solid black';
回答by Rich O'Kelly
As a matter of style it is better to de-couple your styling from your javascript. You should consider creating your style in css, then reference it in javascript by adding the appropriate css class eg:
作为风格问题，最好将您的样式与您的 javascript 分离。您应该考虑在 css 中创建您的样式，然后通过添加适当的 css 类在 javascript 中引用它，例如：
CSS
CSS
.className {border : '4em solid black';}
Javascript
Javascript
document.getElementById("'tt'").className += " className";
Or if you are able to use a javascript framework such as jQuery:
或者，如果您能够使用 javascript 框架，例如 jQuery：
$('#tt').addClass('className');
$('#tt').removeClass('className');
$('#tt').toggleClass('className');
回答by Matti Virkkunen
Setting the border width isn't enough to make it visible. Do something like
设置边框宽度不足以使其可见。做类似的事情
document.getElementById('tt').style.border = "1px solid #000";
Although, this is something that should definitely be done with CSS.
虽然，这绝对应该用 CSS 来完成。
Also, it seems Webkit (at least on Chromium 15) doesn't like rounded borders on tables. Better not use a table for what you're doing anyways.
此外，似乎 Webkit（至少在 Chromium 15 上）不喜欢桌子上的圆形边框。无论如何，最好不要使用桌子来做你正在做的事情。
