| Author: | Oliver Steele |
| Copyright: | Copyright 2006 Oliver Steele. All rights reserved. |
| License: | MIT License (Open Source) |
| Homepage: | http://osteele.com/sources/javascript |
| Download: | http://osteele.com/sources/javascript/divstyle.js |
| Docs: | http://osteele.com/sources/javascript/docs/divstyle |
| Example: | http://osteele.com/sources/javascript/demos/gradients.html |
| Blog: | http://osteele.com/archives/2006/03/javascript-gradient-roundrects |
| Created: | 2006-03-16 |
| Modified: | 2006-03-21 |
divstyle.js adds a user-extensible style mechanism, that parallels CSS styles but can contain properties that are not in the CSS standard.
When divstyle.js is loaded, <div> tags in the HTML document that have a class of "style" can contain (a subset of) CSS, but with nonstandard property names. Each element that is selected by a "div CSS" rule has a .divStyle property. The value of this property is a map of property names to values.
See the Gradient library for an example of how this can be used.
<html>
<head>
<-- include the divstyle implementation: -->
<script type="text/javascript" src="behaviour.js"></script>
<script type="text/javascript" src="divstyle.js"></script>
</head>
<body>
<!-- define the styles: -->
<div class="style">
#e1, .myclass {my-property: 'string', prop1: 123}
.myclass {prop2: #ff0000}
</div>
<!-- define the elements. The styles are applied to these. -->
<div id="e1"></div>
<div id="e2" class="myclass"></div>
<div id="e3" class="myclass"></div>
<!-- access the styles from JavaScript: -->
<script type="text/javascript">
alert(document.getElementById('e1').divStyle.myProperty);
alert(document.getElementById('e2').divStyle.prop1);
alert(document.getElementById('e3').divStyle.prop2);
var rules = document.divStylesheet.cssRules; // all the rules
</script>
</body>
</html>
You can’t put the style content in comments. (Safari strips comments from the DOM before JavaScript sees them.)
CSS simple selectors are limited to at most one modifier (div.c1, but not div.c1.c2).
Quotes inside an attribute name selector may not work.
The CSS parser is incomplete, and doesn’t recover from many parse errors.