JS `setCss` issue

Recently noticed a bug in JS.setCss. The CSS values can't contain colons; which means you can't use it for setting background-image or similar properties.

Here's a fixed version (also slightly more efficient, and sets all the properties at the same time rather than one by one which can make a difference in some edge cases):

function setCss(element, cssString) {
  var style = {};
  $.each(cssString.split(';'), function (index, rule) {
    rule = rule.split(':');
    var key = rule.splice(0,1)[0];
    style[key] = rule.join(':');
  });
  $(element).css(style);
}

If you're using the web editor, you can apply the fix by adding a line to the UI Initialisation script:

JS.eval("setCss=function(s,i){var n={};$.each(i.split(';'),function(s,i){var c=(i=i.split(':')).splice(0,1)[0];n[c]=i.join(':')}),$(s).css(n)};")

(You can do the UI Initialisation script version if you're in the offline editor too, that's what I did! Which is obvious but just in case you're like me and need things spelled out!)


Update: could still be a little neater and more efficient:

function setCss(element, cssString) {
  $(element).css(cssString.split(/;\s*/).reduce(function (rule, obj) {
    rule = rule.split(/:\s*/);
    obj[rule.splice(0,1)] = rule.join(":");
    return obj;
  }, {}));
}

Log in to post a reply.

Support

Forums