JavaScript中的CSS边框

Question

我正在使用以下过程从JavaScript修改CSS,但它没有给出任何结果.

任何人都可以检查代码,让我知道正确的方法.我需要半径的桌子边框.

这是我的表结构:

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

以下是正在使用的javascript

document.getElementById('tt').style.borderRadius = '4em'; // w3c
document.getElementById('tt').style.MozBorderRadius = '4em'; // mozilla
document.getElementById('tt').style.border = '4em'; // mozilla

Answer 1

您必须自己设置边框(并且注意border不是仅限Mozilla的属性):

document.getElementById('tt').style.border = '4em solid black';

http://jsfiddle.net/KYEVq/

Answer 2

作为一种风格问题,最好将你的样式与你的javascript分开.您应该考虑在css中创建样式,然后通过添加适当的css类在javascript中引用它,例如:

CSS

.className {border : '4em solid black';}

使用Javascript

document.getElementById("'tt'").className += " className";

或者,如果您能够使用jQuery等javascript框架:

$('#tt').addClass('className');
$('#tt').removeClass('className');
$('#tt').toggleClass('className');