Page 26 - JavaScript修炼之道

任务5 动态修饰内容 13

设置元素的样式

// Prototype
$(element).setStyle('prop: value; prop2: value2;')
$(element).setStyle({ prop: 'value', prop2: 'value2' })
// jQuery
$(element).css('prop', 'value')
$(element).css({ prop: 'value', prop2: 'value2' })
// MooTools
$(element).setStyle('prop', 'value')
$(element).setStyles({ prop: 'value', prop2: 'value2' })
// YUI 3
Y.one('#id').setStyle('prop', 'value')
Y.one('#id').setStyles({ prop: 'value', prop2: 'value2' })
// Dojo
dojo.style(element, 'prop', 'value')
dojo.style(element, { prop: 'value', prop2: 'value2' })
// Ext JS
Ext.get(element).setStyle('prop', 'value')
Ext.get(element).setStyle({ prop: 'value', prop2: 'value2' })
Ext.get(element).applyStyles(function(e) { return someSpec; })

获取元素的样式

// Prototype
$(element).getStyle('prop')
// jQuery
$(element).css('prop')
// MooTools
$(element).getStyle('prop')
// YUI 3
Y.one('#id').getComputedStyle('prop')
Y.one('#id').getStyle('prop')
// Dojo
dojo.style(element, 'prop')
dojo.style(element) // => 获得该元素所有的样式
// Ext JS
Ext.get(element).getStyle('prop')
Ext.get(element).getStyles('prop', 'prop2', 'prop3')

相关任务

 任务6