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

Answer 1

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/

Answer 2

set CSS style in js solutions all in one

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

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

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

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