github-migration/prototype
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

prototype: 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.

Browse Source
This commit is contained in:
Sam Stephenson 2007-07-24 18:14:36 +00:00
parent c6f3daadaa
commit 7b2ce66e88
3 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CHANGELOG
View File

@ -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]

12
src/dom.js
View File

@ -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;
},

32
test/unit/dom.html
View File

@ -223,6 +223,12 @@
</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 @@
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);