Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 2 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 19 additions and 21 deletions.
  1. +2 −1 .gitignore
  2. +9 −8 README.md
  3. +8 −12 src/style_rule.coffee
View
3 .gitignore
@@ -1,2 +1,3 @@
.DS_Store
-example.html
+example.html
+js
View
17 README.md
@@ -1,13 +1,14 @@
#StyleRule
- StyleRule adds the ability to manage css style rules with javascript.
+ Cross-browser css style rules management from javascript.
##Example
-
- var index_red = StyleRule.add("body", "background: red;");
- var index_yellow = StyleRule.add("body", "background: yellow;");
- var index_blue = StyleRule.add("body", "background: blue;");
- var index_brown = StyleRule.add("body", "background: brown;");
+
+ var styleRule = new StyleRule();
+ var index_red = styleRule.add("body", "background: red;");
+ var index_yellow = styleRule.add("body", "background: yellow;");
+ var index_blue = styleRule.add("body", "background: blue;");
+ var index_brown = styleRule.add("body", "background: brown;");
- StyleRule.replace(index_blue, "body", "background: violet;");
- StyleRule.remove(index_yellow);
+ styleRule.replace(index_blue, "body", "background: violet;");
+ styleRule.remove(index_yellow);
View
20 src/style_rule.coffee
@@ -1,43 +1,39 @@
class StyleRule
- @init: ->
+ constructor: ->
@styleNode = @_buildStyleNode()
@style = @styleNode[if @styleNode.sheet then 'sheet' else 'styleSheet']
@cssRulesProperty = if @style.rules then "rules" else "cssRules"
@removeMethodName = if @style.removeRule then "removeRule" else "deleteRule"
@insertRuleMethod = if @style.insertRule then @_insertRule else @_addRule
- @_buildStyleNode: ->
+ _buildStyleNode: ->
styleNode = document.createElement "style"
styleNode.type = "text/css"
styleNode.rel = "alternate stylesheet"
head = document.head or document.getElementsByTagName("head")[0] or document.documentElement
head.appendChild styleNode
- @_addRule: (selector, declaration, index) ->
+ _addRule: (selector, declaration, index) ->
index = index or @getCssRules().length
@style.addRule selector, declaration, index
index
- @_insertRule: (selector, declaration, index) ->
+ _insertRule: (selector, declaration, index) ->
index = index or @getCssRules().length
@style.insertRule "#{selector} { #{declaration} }", index
index
- @getCssRules: ->
- @init() if not @style?
+ getCssRules: ->
@style[@cssRulesProperty]
- @add: (selector, declaration, index) ->
- @init() if not @style?
+ add: (selector, declaration, index) ->
@insertRuleMethod.call @, selector, declaration, index
- @remove: (index) ->
- @init() if not @style?
+ remove: (index) ->
index = index or @getCssRules().length - 1
@style[@removeMethodName].call @style, index
- @replace: (index, selector, declaration) ->
- @init() if not @style?
+ replace: (index, selector, declaration) ->
@style[@removeMethodName].call @style, index
@add selector, declaration, index

No commit comments for this range

Something went wrong with that request. Please try again.