通过JavaScript动态设置CSS3

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

我做了以下工作，它适用于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中工作？什么是解决方法？

来源

2013-06-19 CookieMonster

您必须缩短前缀名称并删除连字符。使用骆驼情况下，除了当它的前缀 - 那么第一个字符也必须进行资本化：

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"

来源

2013-06-19 04:42:15 K3N

通过JavaScript动态设置CSS3

回答

相关问题