Untuk menambah beberapa inline style pada sebuah HTML element dengan menggunakan javaScript dapat menggunakan beberapa cara yang akan kita bahas berikut ini.
HTML code
Sebagai contoh pada catatan kali ini kita aka menggunakan HTML element sebegai berikut:
<div id="cobaInlineStyle">
<span>Coba</span>
<code>HTMLElement.style</code>
</div>
HTMLElement.style
style adalah read-only property yang mengembalikan inline style dari suatu element dalam bentuk object CSSStyleDeclaration yang berisi daftar dari semua style property untuk element tersebut.
Berikut ini daftar CSS Property yang bisa digunakan.
javaScript code
const elm = document.getElementById('cobaInlineStyle');
elm.style.backgroundColor = 'tomato';
elm.style.color = 'white';
elm.style.lineHeight = '64px';
elm.style.padding = '0 1em';
elm.style.display = 'inline-block';
Result
<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
<span>Coba</span>
<code>HTMLElement.style</code>
</div>
Browser Support
caniuse.com/mdn-api_htmlelement_style
CSSStyleDeclaration.cssText
javaScript code
const elm = document.getElementById('cobaInlineStyle');
elm.style.cssText = 'background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;';
Result
<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
<span>Coba</span>
<code>HTMLElement.style</code>
</div>
Browser Support
caniuse.com/mdn-api_cssstyledeclaration_csstext
Conclusion
Dapat diperhatikan bahwa kedua metode diatas menghasilkan output yang sama persis, selain itu keduanya memiliki browser support yang baik, maka kedua metode di atas dapat digunakan sesuai degan kebutuhan.
Selain mengunakan metode di atas, masih ada cara lain untuk menambah atau mengatur tampilan dari suatu HTML element, yaitu dengan cara menambahkan class yang ada. Untuk lebih jelasnya bisa dipelajari pada catatan berikut: Add and Remove Multiple Classes to an Element using javaScript
Top comments (0)