css - 通过JavaScript动态设置CSS3

我想通过JavaScript将column-count应用于无序列表，因为我事先不知道需要多少列。

我做了以下工作，这在Chrome和IE10中有效，但在FireFox和Opera中不起作用。

var ul= document.getElementById('multi-columns');
ul.style['-moz-column-count'] = 4;
ul.style['-webkit-column-count'] = 4;
ul.style['column-count'] = 4;

我尚未在Safari中测试此功能，但我敢打赌，因为它可以在Chrome浏览器中使用。

为什么在FireFox和Opera中不能正常工作？什么是解决方法？

最佳答案

您必须缩短前缀名称并删除连字符。使用驼峰式大写字母（除了带前缀时），然后第一个字符也必须大写：

var ul= document.getElementById('multi-columns');
ul.style['MozColumnCount'] = 4;
ul.style['WebkitColumnCount'] = 4;
ul.style['columnCount'] = 4;

要么

ul.style.MozColumnCount = 4;
ul.style.WebkitColumnCount = 4;
ul.style.columnCount = 4;

您可以使用以下函数将其概括：

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 (proparray[i] in root.style){ //if property exists on element (value will be string, empty string if not set)
            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"

关于css - 通过JavaScript动态设置CSS3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17182591/

通过javascript

css - 通过JavaScript动态设置CSS3