How to set CSS3 transition using javascript?

Question

How can I set CSS using javascript (I don\'t have access to the CSS file)?

#fade div {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-         


        

Answer 1

The purpose of this question is obsolete now, but the principle is still relevant.

In JavaScript, you have two ways of addressing object properties:

object.property
object['property']

The latter method, though it is less convenient, allows for property names which would be invalid, and also allows you to use a variable.

Element styles are properties of the element’s style property, so you also have a choice:

element.style.color
element.style['color']

For property names which are invalid using the dot notation, such as containing a hyphen, you can only use the second notation:

element.style['background-color']

For your convenience these troublesome names are replicated using camelCase:

element.style.backgroundColor

And, for completeness, this can also use the alternative notation:

element.style['backgroundColor']

There, you have a choice of three.

Generally, any property, such as -ms-transition can also be accessed using:

element.style['-ms-transition']

without worrying about how to express the dot notation.

Not that you need to worry about these vendor prefixes any more, but the principal still applies to other awkward properties.