script.aculo.us---Effect.Morph

最新推荐文章于 2025-11-22 13:46:41 发布

最新推荐文章于 2025-11-22 13:46:41 发布 · 113 阅读

文章标签：

#CSS #JavaScript #ViewUI

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用Scriptaculous库中的Effect.Morph方法来改变HTML元素CSS样式的技巧。通过简单的示例代码展示了如何设置背景颜色和文字颜色，以及更复杂的样式变化，包括边框宽度、字体大小等。

This effect changes the CSS properties of an element.



Simple :

$('morph_example').morph('background:#080;color:#fff');

Complex :
new Effect.Morph('error_message',{
  style:'background:#f00; color:#fff;'+
    'border: 20px solid #f88; font-size:2em',
  duration:0.8
});

Style as a hash (keys should be javascript names, rather than CSS ones i.e. ‘backgroundColor’ rather than ‘background-color’):

Effect-specific paramters

Option Description
style the target style of your element, writing with the standard CSS syntax, or as a hash

[url]http://wiki.script.aculo.us/scriptaculous/show/Effect.Morph[/url]