diff --git a/CHANGELOG b/CHANGELOG index b906e43..1945f7f 100644 --- 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 index f2ab680..bfc19de 100644 --- 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 index b7dc397..39fe29c 100644 --- a/test/unit/dom.html +++ b/test/unit/dom.html @@ -223,6 +223,12 @@ +
test_csstext_1
+
test_csstext_2
+
test_csstext_3
+
test_csstext_4
+
test_csstext_5
+
@@ -938,7 +944,7 @@ 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 @@ $('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);