When you’re programming in JavaScript, you need to know how to convert CSS property names to JavaScript. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events, including those listed here. Finally, some words cannot be used as JavaScript variables, functions, methods, loop labels, or object names; those reserved words are listed here.
Converting CSS property names to JavaScript
-
If the CSS property is one word (such as height), it remains as it is.
-
If the CSS property is more than one word, separated by dashes, it gets converted to camelCase.
Here is a complete reference of the property name conversions from CSS to JavaScript.
| CSS Property | JavaScript Reference |
|---|---|
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| float | cssFloat |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-decoration: blink | textDecorationBlink |
| text-decoration: line-through | textDecorationLineThrough |
| text-decoration: none | textDecorationNone |
| text-decoration: overline | textDecorationOverline |
| text-decoration: underline | textDecorationUnderline |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
| z-index | zIndex |
Web browser events in JavaScript
Here is a list of common events that happen in web browsers that JavaScript can respond to.
| Event | Occurs When . . . |
|---|---|
| abort | The loading of a file is aborted. |
| blur | An element has gone out of focus. In other words, the element is no longer the thing that the user is focusing on. |
| change | An element’s value has changed since losing and regaining focus. |
| click | A mouse has been clicked on an element. |
| dbclick | A mouse has been clicked twice on an element. |
| error | A file failed to load. |
| focus | An element has come into focus. In other words, the element is what the user is currently focusing on. |
| input | The value of an or |
What are JavaScript reserved words?
| abstract | boolean | break |
| byte | case | catch |
| char | class | const |
| continue | debugger | default |
| delete | do | double |
| else | enum | export |
| extends | false | final |
| finally | float | for |
| function | goto | if |
| implements | import | in |
| instanceof | int | interface |
| long | native | new |
| null | package | private |
| protected | public | return |
| short | static | super |
| switch | synchronized | this |
| throw | throws | transient |
| true | try | typeof |
| var | void | volatile |
| while | with |
