Setting CSS3 dynamically via JavaScript

Question

I want to apply column-count to an unordered list via JavaScript because I won't know how many columns I need beforehand.

I did the following and this works in Chrome and IE10, but does not work in FireFox and Opera.

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

I have not tested this in Safari, but I bet it does since it works in Chrome.

Why does not this work in FireFox and Opera? What is a workaround?

user1693593 · Accepted Answer · 2013-06-19 04:42:15Z

You must shorten the prefix names and drop the hyphenation. Use camel-case except for when it's prefixed - then the first char must be capitalized too:

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

or

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

you can generalize this by using a function such as this:

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"

Collectives™ on Stack Overflow

Setting CSS3 dynamically via JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related