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