Границы в CSS в JavaScript
Я использую приведенную ниже процедуру для изменения CSS из JavaScript, но она не дает никакого результата.
может кто-нибудь пожалуйста, проверьте код и дайте мне знать правильный способ. Мне нужна граница для таблицы с radius.
Это моя структура таблицы:
<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
3 ответов
вы должны установить саму границу (и обратите внимание border
не является свойством только Mozilla):
document.getElementById('tt').style.border = '4em solid black';
как стиль лучше отделить свой стиль от ваш JavaScript. Вы должны рассмотреть возможность создания своего стиля в css, а затем ссылаться на него в javascript, добавив соответствующий класс css, например:
в CSS
.className {border : '4em solid black';}
в JavaScript
document.getElementById("'tt'").className += " className";
или если вы можете использовать структуру javascript, такую как jQuery:
$('#tt').addClass('className');
$('#tt').removeClass('className');
$('#tt').toggleClass('className');
установка ширины границы недостаточно, чтобы сделать ее видимой. Сделайте что-нибудь вроде
document.getElementById('tt').style.border = "1px solid #000";
хотя, это то, что определенно должно быть сделано с CSS.
кроме того, кажется, Webkit (по крайней мере, на Chromium 15) не любит округленные границы на таблицах. В любом случае, лучше не использовать стол для того, что вы делаете.