CSS border in JavaScript

Question

I am using below procedure to modify CSS from JavaScript but it is not giving any result.

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

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

Much more unobtrusive way: add some additional CSS class to your element instead of modifying styles directly. — dfsq
– dfsq, Commented Nov 18, 2011 at 12:39

Jared Farrish · Accepted Answer · 2011-11-18 12:35:27Z

24

You've got to set the border itself (and note border is not a Mozilla-only property):

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

http://jsfiddle.net/KYEVq/

answered Nov 18, 2011 at 12:35

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RoToRa Over a year ago

And remove the border="0" from the table in the HTML since it may override the CSS.

Rich O'Kelly · Accepted Answer · 2011-11-18 12:42:26Z

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:

CSS

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

Javascript

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

Or if you are able to use a javascript framework such as jQuery:

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

xgqfrms · Accepted Answer · 2020-11-05 08:41:13Z

set CSS style in js solutions all in one

set each style property separately

const app = document.querySelector(`#app`); // set each style property separately app.style.borderRadius = '4em'; app.style.border = '1px solid red'; // app.style.border, equals to /* app.style.borderWidth = '1px'; app.style.borderStyle = 'solid'; app.style.borderColor = 'red'; */

<div id="app"> text content... </div>

set all style properties in once

const app = document.querySelector(`#app`); // set all style properties in one class app.style = ` border-radius: 4em; border: 1px solid red; `;

<div id="app"> text content... </div>

set all style properties in one class, with setAttribute API

const app = document.querySelector(`#app`); // set all style properties in one class app.setAttribute(`class`, `app-style-class`)

.app-style-class{ border-radius: 4em; border: 1px solid red; }

<div id="app"> text content... </div>

set all style properties in one class, with classList API

const app = document.querySelector(`#app`); // set all style properties in one class app.classList.add(`app-style-class`)

.app-style-class{ border-radius: 4em; border: 1px solid red; }

<div id="app"> text content... </div>

refs

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

see more

https://www.cnblogs.com/xgqfrms/p/13932298.html

Matti Virkkunen · Accepted Answer · 2011-11-18 12:36:55Z

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.

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.

Collectives™ on Stack Overflow

CSS border in JavaScript

4 Answers 4

1 Comment

Comments

set CSS style in js solutions all in one

refs

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

set CSS style in js solutions all in one

refs

Comments

Comments

Related