Question

可以轻松更改某些样式参数，例如：

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

但是如何更改以-开头的参数，例如-o-transform-origin？

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

请建议，如何处理纯旧的时尚JavaScript（没有jQuery，没有Dojo，......）。

Answer 1

使用括号表示法：

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

Answer 2

以下链接将有所启发：

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

另外，如果链接腐烂，我会在链接中包含一些代码！

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"

如何用JavaScript更改样式参数？

2 个答案: