Like this:
Code:
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:
Code:
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:
Code:
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:
Code:
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:
Code:
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.
Bookmarks