MooTools - 样式属性

MooTools样式属性 - 从简介，安装，程序结构，选择器，使用数组，函数，事件处理，DOM操作，样式属性，输入过滤，拖放，正则表达式，期刊，滑块，可排序，手风琴，工具提示开始学习MooTools ，选项卡式内容，类，Fx.Element，Fx.Slide，Fx.Tween，Fx.Morph，Fx.Options，Fx.Events。

MooTools提供了一些特殊方法来设置和获取DOM元素的样式属性值.我们使用不同的样式属性，如宽度，高度，背景颜色，字体粗细，字体颜色，边框等.通过设置和获取这些样式属性的不同值，我们可以呈现不同样式的HTML元素.

设置和获取样式属性

MooTools库包含不同的方法，用于设置或获取特定样式属性或多个样式属性的值.

setStyle()

此方法允许您设置DOM元素的单个属性的值.此方法将适用于特定DOM元素的选择器对象.让我们举一个为div元素提供背景颜色的例子.请看下面的代码.

示例

                                    window.addEvent('domready', function() {            $('body_wrap').setStyle('background-color', '#6B8E23');            $$('.class_name').setStyle('background-color', '#FAEBD7');         });                     A

C D E

getStyle()

getStyle（）方法用于检索元素的样式属性的值。让我们以一个示例为例，该示例检索名为body_wrap的div的背景色。看一下以下语法。

Syntax

//first, set up your variable to hold the style valuevar styleValue = $('body_wrap').getStyle('background-color');

Multiple Style Properties

MooTools库包含用于设置或获取特定样式属性或多个样式属性的值的不同方法。

setStyle()

如果要在单个元素或元素数组上设置多个样式属性，则必须使用setStyle（）方法。看一下setStyle（）方法的以下语法。

Syntax

$('').setStyles({   //use different style properties such as width, height, background-color, etc.});

示例

                                                var setWidth = function(){            $('body_div').setStyles({               'width': 100            });         }         var setHeight = function(){            $('body_div').setStyles({               'height': 100            });         }         var reset = function(){            $('body_div').setStyles({               'width': 200,               'height': 200            });         }                  window.addEvent('domready', function() {            $('set_width').addEvent('click', setWidth);            $('set_height').addEvent('click', setHeight);            $('reset').addEvent('click', reset);         });

在网页上尝试这些按钮，你可以看到div大小的差异.