CSS Camelizer

[magicyte]

This script takes normal css (e.g. "background-color") and converts it into "camel style" which can be parsed by JavaScript. Of course, it applies these styles to any element. Here:

function css(elem, options) {
  var ss = (options.replace(/ /g, "")).split(";");
  var privates = {};
  for (var i = 0; i < ss.length; ++i) {
    var s = ss[i].split(":");
    while (1) {
      if (s[0].indexOf("-") != -1) {
        s[0] = s[0].replace(new RegExp(s[0].substr(s[0].indexOf("-"), 2), "g"), (s[0].substr(s[0].indexOf("-"), 2))[1].toUpperCase());
      } else {
        break;
      }
    }
    document.getElementById(elem).style[s[0]] = s[1];
  }
}

Syntax: css("myElement1", "background-color: blue; color: red; width: 200; height: 100;");

There's one flaw where if you try "border: 1px solid black;", its result will be "border:1pxsolidblack", thus "1pxsolidblack" is applied to border. This isn't an actual style, however, there is a messy way to avoid this, though I may not use it. Does anyone have an idea how I would avoid this problem cleanly?

[Twey]

Like this:

function css(elem, options) {
  if (typeof elem === "string")
    elem = document.getElementById("elem");

  elem.style.cssText += "; " + options;
}

Never make the user pass in an ID if they've got a reference to the element lying around. It's horribly inefficient, and very messy — and, of course, requires giving all their elements IDs.

However, this is passing around strings of code, and is a perfect example as to why doing so is a bad idea. Say, for example, since we don't want our viewers to suffer epileptic fits whilst reading our page, we want to first apply a filter function that will strip out all text-decoration: blink instructions. The only decent way to do this is to parse the string and break it down into a native data-type, remove the offending property, and then compile it back into a string! Horrible. Additionally, long strings get very difficult to read. Rather, it would be preferable to pass an object in the first place:

function css(elem, options) {
  if (typeof elem === "string")
    elem = document.getElementById(elem);

  for (var x in options)
    elem.style[x] = options[x];

  return elem;
}

... and use it like:

css("myElement1", {
  backgroundColor: "blue",
  color: "red",
  width: "200px",
  height: "100px"
});

This is much more readable, allows us to apply proper formatting, and is much easier to work with, too: we can simply write our filter function thus:

Object.copy = function(o) {
  var r = {};

  for (var x in o)
    if (o.hasOwnProperty(x))
      r[x] = o[x];

  return r;
};

function removeBlink(cssObj) {
  var r = Object.copy(cssObj);

  if (r.textDecoration === "blink")
    delete r.textDecoration;

  return r;
}

To half-answer your previous question, the proper way to parse such a string into an object would be:

Array.map = function(f, a) {
  for (var i = a.length - 1, r = []; i >= 0; --i)
    r[i] = f(a[i], i);

  return r;
};

String.upperFirst = function(s) {
  return s.charAt(0).toUpperCase() + s.substr(1);
};

String.trim = function(s) {
  return s.replace(/^\s+/, "").replace(/\s+$/, "");
};

Object.fromArray = function(a) {
  var r = {};

  Array.map(function(pair) { r[pair[0]] = pair[1]; }, a);

  return r;
};

var Css = (function() {
  var jsEquivs = {
    'float' : "css-float"
    // &c.
  };

  function cssToObject(s) {
    return Object.fromArray(Array.map(textToPair, s.split(";")));
  }

  function textToPair(s) {
    var r = Array.map(String.trim, s.split(":"));

    r[0] = propertyToCss(r[0]);

    return r;
  }

  function propertyToJs(s) {
    return Array.map(String.upperFirst, (jsEquivs[s] || s).split("-")).join("");
  }

  return {
    propertyToJs: propertyToJs,
    cssToObject: cssToObject
  };
})();

Also note that "100" is not a proper value for a CSS property: it requires a unit.