CSS Attribute Name in JavaScript

By Xah Lee. Date: 2018-01-21. Last updated: 2022-08-20.

CSS attribute names are hyphen separated, e.g. font-size.

The corresponding property in JavaScript is camelCase: fontSize.

Here is a table of setting styles in CSS and in JavaScript:

CSS Syntax vs JavaScript DOM Syntax
CSS	JavaScript
`padding:1em`	`elm.style.padding="1em"`
`border:solid thin red`	`elm.style.border="solid thin red"`
`background-color:red`	`elm.style.backgroundColor="red"`
`font-size:large`	`elm.style.fontSize="large"`
`font-family:"DejaVu Sans",sans-serif`	`elm.style.fontFamily='"DejaVu Sans",sans-serif'`

2022-08-20

How to Find the Exact CSS Attribute Name in JavaScript

A easy way to check style attribute is to use browser's JavaScript console name completion feature. Type document.body.style. then press Tab, it'll show a list. 〔see How to Use Browser Console〕

Google Chrome browser console completion — Google Chrome browser console JavaScript keyword completion

JavaScript/DOM, Change CSS