ChocolateChip version 1.1.7

CSS() update

As of version 1.1.7 element.css() has been updated to accept arguments more like jQuery. You no longer need to enclose a string of CSS declarations in curly braces. You can just quote the string. This means that if you have code written with curly braces on for element.css() you’ll need to update that code to work with this version. You can also pass element.css() and object of property/value pairs. When passing an object, if the property is a single word, it does not need to be quoted. If it is a hyphenated property it does need to be quotes. The property values always need to be quoted. Observe the examples below:

// Example of string:
$(".content").css("height: 100%; width: 100%, background-color: #ccc; color: #666; border: solid 2px #666;");

// Simple property and value (can only use once, for more use object notation)
$(".menu").css("border", "solid 1px red");

// Passing in an object of properties and values:
$(".footer").css({height:"100px", width:"100%", color:"#000","background-color":"#fff});

// To get a particular style attribute of an element:
var menuFontColor = $(".menu > li").css("color");

Update Dec 23, 2010

As of version 1.0.8, ChocolateChip no longer has a separate $.style() method. Its functionality has been incorporated into the Element.css() method. The new functionality is explained as follows:

To get the style of an element, simply pass the css() method the property whose value you want:

console.log("The font size is: " + $("#item").css("font-size"));

Note: When ChocolateChip returns a CSS value, this is always a string. This is so even when it appears to be a numerical value such as height or width. To do any math operation with these types of returned values, you’ll need to convert them to numbers. You can do this with parseInt. If you do not use parseInt, your attempts at addition will instead result in string concatenation. The example below shows how to use parseInt with a returned CSS value to get the numerical equivalent.

var itemWidth = $("#item").css("width");
itemWidth = parseInt(itemWidth);
var distance = itemWidth + $("#item").getLeft();
console.log("The total distance from the left is: " + distance);

There are two ways to set styles on an element. You can set a property/value pair or a string of values delimited by curly braces and quoted. By enclosing the curly braced text we can pass in the complex CSS definitions as a string. At parse time, ChocolateChip removes the curly quotes and applies the CSS definition to the element:

// Example of property/value pair:
$("p:first-of-type").css("color", "red");

// Example of string enclosed in curly braces and quotes:
$$("li.members").forEach(function(members) {
   members.css("{ color: red; background-color: orange; font-size: 24px; font-weight: bold; }");
});

For versions 1.0.7 and earlier ChocolateChip uses the following two methods to get and set styles:

ChocolateChip has two methods for dealing with style. They are:

  1. $.style()
  2. Element.css()

$.style() takes two arguments: the element whose style you want, and the style you want:

$.ready(function() {
	var p = $("p:first-of-type");
	var pColor = $.style(p, "color");
	console.log("The text color is: " + pColor);
});

Setting an element’s style is easy using the Element.css() method. This method takes as its argument any valid CSS property/value pairs. By default this method adds the CSS to whatever is already defined on the element. If you want, you can pass an option second parameter of true. This will force the method to replace whatever inline styles the element might have with the styles you are passing in.

$.ready(function() {
	var p = $("p:first-of-type");
	var styles = "font-weight: bold; background-color: red; color: gold;";
	// This will append the new CSS onto the paragraph tag.
	p.css(styles);
	// In contrast, this will replace whatever other styles might be inline on the paragraph with the styles being applied.
	p.css("font-size: 24px; text-shadow: 0 1px #fff; color: #000;", true);
});

As you can see in the above examples, you can assign the CSS to a variable and pass that in, or you can define the CSS in the method itself, your choice.

Advertisements