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

Answer 1

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