CODEWITHSUNDEEP
javascript
Ωmega
Ωmega

Reputation: 43703

How to change style parameter with JavaScript?

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, ...).

Upvotes: 3

Views: 3469

Answers (2)

bPratik
bPratik

Reputation: 7018

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"​​​​

Upvotes: 4

Larry OBrien
Larry OBrien

Reputation: 8606

Use bracket notation:

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

Upvotes: 5

Related Questions