prototype: Make Element#setStyle accept a string argument of CSS rule…

…s. Deprecate uncamelized style property names when setting styles using an object (for performance reasons). Closes #9059.
prototypejs · Jul 24, 2007 · 7b2ce66 · 7b2ce66
1 parent c6f3daa
commit 7b2ce66
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,5 +1,18 @@
 *SVN*
 
+* Make Element#setStyle accept a string argument of CSS rules. Deprecate uncamelized style property names when setting styles using an object (for performance reasons).  Closes #9059.  [Tobie Langel]
+  Examples:
+    $('id').setStyle('font-size: 12px; float: left; opacity: 0.5');
+    $('id').setStyle({fontSize: '12px', cssFloat: 'left', opacity: 0.5});
+
+  !! BACKWARDS COMPATIBILITY CHANGE !!
+
+  If you have code that looks like this:
+    $('id').setStyle({'font-size': '12px'});
+  You need to replace it with either of the following:
+    $('id').setStyle({fontSize: '12px'});
+    $('id').setStyle('font-size: 12px;');
+
 * Add Element#identify, which returns the element's ID if it exists, or sets and returns a unique, auto-generated ID (of the form "anonymous_element_" + auto-incremented digit) otherwise.  Use this when you need to ensure an element has an ID.  Closes #9012.  [Jeff Watkins, sam, Tobie Langel]
 
 * Make Element#readAttribute work for cloned elements in IE. Closes #8481. [chem, Tobie Langel]

diff --git a/src/dom.js b/src/dom.js
@@ -365,16 +365,20 @@ Element.Methods = {
     return $(element).getStyle('opacity');
   },
 
-  setStyle: function(element, styles, camelized) {
+  setStyle: function(element, styles) {
     element = $(element);
-    var elementStyle = element.style;
-
+    var elementStyle = element.style, match;
+    if (typeof styles === 'string') {
+      element.style.cssText += ';' + styles;
+      return styles.include('opacity') ?
+        element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
+    }
     for (var property in styles)
       if (property == 'opacity') element.setOpacity(styles[property])
       else 
         elementStyle[(property == 'float' || property == 'cssFloat') ?
           (elementStyle.styleFloat === undefined ? 'cssFloat' : 'styleFloat') : 
-          (camelized ? property : property.camelize())] = styles[property];
+            property] = styles[property];
 
     return element;
   },

diff --git a/test/unit/dom.html b/test/unit/dom.html
@@ -223,6 +223,12 @@ <h1>Prototype Unit test file</h1>
   </div>
 </div>
 
+<div id="test_csstext_1">test_csstext_1</div>
+<div id="test_csstext_2">test_csstext_2</div>
+<div id="test_csstext_3" style="border: 1px solid red">test_csstext_3</div>
+<div id="test_csstext_4" style="font-size: 20px">test_csstext_4</div>
+<div id="test_csstext_5">test_csstext_5</div>
+
 <div id="custom_attributes">
   <div foo="1" bar="2"></div>
   <div foo="2"></div>
@@ -938,7 +944,7 @@ <h1>Prototype Unit test file</h1>
       Element.setStyle('style_test_3',{ marginTop: '1px' });
       assertEqual('1px', $('style_test_3').style.marginTop);
 
-      $('style_test_3').setStyle({ 'margin-top': '2px', left: '-1px' });
+      $('style_test_3').setStyle({ marginTop: '2px', left: '-1px' });
       assertEqual('-1px', $('style_test_3').style.left);
       assertEqual('2px', $('style_test_3').style.marginTop);
 
@@ -959,7 +965,29 @@ <h1>Prototype Unit test file</h1>
 
       $('style_test_3').setStyle({ opacity: 0 });
       assertEqual(0, $('style_test_3').getStyle('opacity'));
-    }},
+
+      $('test_csstext_1').setStyle('font-size: 15px');
+      assertEqual('15px', $('test_csstext_1').getStyle('font-size'));
+
+      $('test_csstext_2').setStyle({height: '40px'});
+      $('test_csstext_2').setStyle('font-size: 15px');
+      assertEqual('15px', $('test_csstext_2').getStyle('font-size'));
+      assertEqual('40px', $('test_csstext_2').getStyle('height'));
+
+      $('test_csstext_3').setStyle('font-size: 15px');
+      assertEqual('15px', $('test_csstext_3').getStyle('font-size'));
+      assertEqual('1px', $('test_csstext_3').getStyle('border-top-width'));
+
+      $('test_csstext_4').setStyle('font-size: 15px');
+      assertEqual('15px', $('test_csstext_4').getStyle('font-size'));
+
+      $('test_csstext_4').setStyle('float: right; font-size: 10px');
+      assertEqual('right', $('test_csstext_4').getStyle('float'));
+      assertEqual('10px', $('test_csstext_4').getStyle('font-size'));
+
+      $('test_csstext_5').setStyle('float: left; opacity: .5; font-size: 10px');
+      assertEqual(parseFloat('0.5'), parseFloat($('test_csstext_5').getStyle('opacity')));
+   }},
 
     testElementSetStyleCamelized: function() { with(this) {
       assertNotEqual('30px', $('style_test_3').style.marginTop);