JSB: jsb.createStyleSheet()

createStyleSheet()

Creates a new style sheet and appends it to the document head.

Syntax

jsb.createStyleSheet(styles);

If styles is of type string then it represents the cssText of the new style sheet.

If styles is of type object then it represents a list of style rules.

Example

In this is example, the style sheet is created from plain text:

jsb.createStyleSheet("p{color:red} a[href]{color:blue}");

In this is example, the style sheet is created from a list of rules:

jsb.createStyleSheet({
  "p": {
    color: "red"
  },
  "a[href]": {
    color: "blue"
  }
});

Notes

Browser-specific styles

jsb is built on top of base2. That means that you can use base2’s built-in feature detection:

jsb.createStyleSheet({
  "#example": {
    width:   "200px",
    padding:  "20px",
    
    "@MSIE5": {
      width: "160px"
    }
  }
});

Vendor-specific properties

Some browsers provide vendor-specific CSS properties (e.g. -moz-box-sizing). If you want to specify values for these properties then declare them without the vendor prefix:

jsb.createStyleSheet({
  "#example": {
    boxSizing: "border-box"
  }
});

External resources

External resources (e.g. background images) referenced by the new style sheet are relative to the JavaScript file that called the createStyleSheet() method. That means that you can store assets associated with your behavior in the same directory (or a sub-directory) as the JavaScript code.