我想通过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"