CSS border in JavaScript

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');

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/


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