Add Multiple Inline Style to an Element using javaScript

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

Reference

• developer.mozilla.org/en-US/docs/Web/API/HTMLElement
• developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration