CSS-граница в JavaScript - PullRequest
Новая
       5

CSS-граница в JavaScript

9 голосов
/ 18 ноября 2011

Я использую приведенную ниже процедуру для модификации CSS из JavaScript, но это не дает никакого результата.

Может кто-нибудь проверить код и сообщить мне правильный метод.Мне нужна граница для таблицы с радиусом.

Это моя структура таблицы: 

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

14 голосов
/ 18 ноября 2011

Вы должны установить саму границу (и заметьте, border не является свойством только для Mozilla): 

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

http://jsfiddle.net/KYEVq/

6 голосов
/ 18 ноября 2011

Что касается стиля, то лучше отделить ваш стиль от вашего javascript.Вы должны рассмотреть возможность создания своего стиля в css, а затем ссылаться на него в javascript, добавив соответствующий класс css, например:

CSS 

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

Javascript 

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

Или, если вы можете использовать Javascript Framework, например, JQuery: 

$('#tt').addClass('className');
$('#tt').removeClass('className');
$('#tt').toggleClass('className');
0 голосов
/ 18 ноября 2011

Установка ширины границы недостаточна, чтобы сделать ее видимой.Сделайте что-то вроде 

document.getElementById('tt').style.border = "1px solid #000";

Хотя это то, что определенно должно быть сделано с помощью CSS.

Кроме того, кажется, что Webkit (по крайней мере, в Chromium 15) не любит округленные границы настолы.В любом случае лучше не использовать стол для того, что вы делаете.

...