How to change style parameter with JavaScript?

Question

Some style parameters can be changed easily, such as:

document.getElementById(element).style.height = height + "px";

But how can I change those parameters that begin with -, such as -o-transform-origin ?

document.getElementById(element).style.-o-transform-origin = "top left"; // error!

Please advice, how to do with pure old-fashion JavaScript (no jQuery, no Dojo, ...).

Open the browser js console, then type that whole string up to style. you should get entire list of parameters in the autocomplete box, assuming a decent browser. — Evgeny
– Evgeny, Commented Jul 8, 2012 at 0:54

Larry OBrien · Accepted Answer · 2012-07-08 00:55:58Z

5

Use bracket notation:

document.getElementById(element).style['-o-transform-origin'] = "top left"

answered Jul 8, 2012 at 0:55

Larry OBrien

8,6061 gold badge44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bPratik · Accepted Answer · 2012-07-08 00:57:23Z

The following link will shed some light:

http://www.javascriptkit.com/javatutors/setcss3properties.shtml

Also, I'll include some code from the link in case of link rot!

function getsupportedprop(proparray) {
    var root = document.documentElement //reference root element of document
    for (var i = 0; i < proparray.length; i++) { //loop through possible properties
        if (typeof root.style[proparray[i]] == "string") { //if the property value is a string (versus undefined)
            return proparray[i] //return that string
        }
    }
}

//SAMPLE USAGE
var boxshadowprop = getsupportedprop(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']) //get appropriate CSS3 box-shadow property
document.getElementById("mydiv").style[boxshadowprop] = "5px 5px 1px #818181" //set CSS shadow for "mydiv"

Collectives™ on Stack Overflow

How to change style parameter with JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related