Geek Answers Handbook

CSS Border in JavaScript

I use the procedure below to change CSS from JavaScript, but this does not produce any result.

Someone can check the code and tell me the correct method. I need a border for a table with a 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 javascript that uses

document.getElementById('tt').style.borderRadius = '4em'; // w3c
document.getElementById('tt').style.MozBorderRadius = '4em'; // mozilla
document.getElementById('tt').style.border = '4em'; // mozilla
+5
source share
3 answers

You must set the border yourself (and note bordernot the Mozilla property):

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

http://jsfiddle.net/KYEVq/

+9
source

In style style it is better to separate your style from your javascript. You should think about creating your own style in css and then reference it in javascript by adding the appropriate css class, for example:

CSS

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

Javascript

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

, javascript, jQuery:

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

Setting the frame width is not enough to make it visible. Do something like

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

Although, this is something that must be done with CSS.

Furthermore, it seems that Webkit (at least on Chromium 15) does not like rounded table borders. It’s better not to use a table for what you are doing.

0
source

More articles: