show
show(element) -> HTMLElement
显示 element,并返回元素本身。
样例
<div id="error-message" style="display:none;"></div>
$('error-message').show();
// -> HTMLElement (如果 div#error-message 隐藏,则显示)
注意
Element.show 不能 显示通过 CSS 样式表隐藏的元素。这不是 Prototype 的限制,而是与 CSS display 属性的解析过程有关。
译注:通过在 <style> 标签或外部样式表中定义 CSS 属性来隐藏元素,show 方法将不可用 (即该方法只针对内联的 CSS display 属性或通过 Javascript 程序实现的隐藏有效)。
<style>
#hidden-by...
setStyle
setStyle(element, styles) -> HTMLElement
修改 element 的 CSS 样式属性。参数 styles 是一个包含属性名/值对的 Hash 对象, 属性名必须使用 camelized 命名方式指定(译注:例如 CSS 属性 border-width 应写成 borderWidth,而不能写成 border-width)。
样例
$(element).setStyle({ backgroundColor: '#900', fontSize: '12px' });
// -> HTMLElement
注意
该方法在处理 float 和 opacity 时,对不同的浏览器而言是透明的。然而,float 是一个保留的关键字,所以必须进行转义,或使用 cssFloat 来代替。另外,opacity 的取值界于 0(完全透明)和 1(完全不透明)之间。在不同的浏览器...
select [1.6]
select(element, selector...) -> [HTMLElement...]
根据一个或多个指定的 CSS 选择器(字符串),在 element 中查找匹配其中任何一个选择器的后代节点, 返回数组,数组元素已经过 扩展。
该方法完全类似于 $$(),但只能用于一个元素的上下文中,而不是整篇文档。它们所支持的 CSS 语法完全相同,因此详细的描述请参考 $$()。
样例
<ul id="fruits">
<li id="apples">
<h3 title="yummy!">Apples</h3>
<ul id="list-of-apples">
<li id="golden-delicious" title="...
scrollTo
scrollTo(element) -> HTMLElement
滚动窗口以便 elemnet 显示在窗口可视区域的顶部,返回元素本身。
除不修改浏览器的历史记录外,该方法类似于使用 HTML anchors 所获取的效果。
样例
$(element).scrollTo();
// -> HTMLElement
replace
replace(element[, html]) -> HTMLElement
使用 html 参数指定的内容替换 element,返回被替换的 element。
译注:该方法类似于 IE 下的 element.outerHTML = html
当用于 Opera 9 的 input 元素时,若将 replace 当作实例的方法调用(如: $('foo').replace('<p>Bar</p>')),会引发错误。在 Web Forms 2 草案中,replace 是 input 的一个保留属性。在这种情形下,请使用一般的版本( Element.replace('foo', '<p>Bar</p>'))。
html 参数可以是纯文本,一个 HTML 片断或者任意具有 toString 方法的 JavaScript 对象。
如果 html 参数中包括 <script> 标签,在 e...
removeClassName
removeClassName(element, className) -> HTMLElement
从 element 中移除参数 className 指定的 CSS 类,返回元素本身。
样例
<div id="mutsu" class="apple fruit food"></div>
$('mutsu').removeClassName('food');
// -> HTMLElement
$('mutsu').classNames();
// -> ['apple', 'fruit']
...
remove
remove(element) -> HTMLElement
从文档中彻底移除 element,返回移除的元素。
如果只想隐藏元素,以备将来能够再次使用,请使用 Element.hide 方法。
样例
// 调用前:
<ul>
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu">Mutsu</li>
<li id="mcintosh">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
$('mutsu').remove();
// -> HTMLElement (并移除 li#mutsu)
// 调用后:
<ul>
<li id="golden-delicious">Golden ...
relativize [1.6]
relativize(element) -> HTMLElement
转换元素的定位方式为相对定位,并且不改变元素在页面中的位置。
译注:该方法使用代码 element.style.position = 'relative' 改变定位方式。在改变定位方式后, 元素左上角的坐标仍会保持原来的位置,如果元素未设置初始的 width 和 height 属性,则调用该方法后, 元素的宽度和高度会改变为系统预设值。
注意:在 1.6.0.3 版本中,该方法会引发异常,需要在第 2066 行后插入代码:
element._originalWidth = element.style.width;
element._originalHeight = element.style.height;
其它版本未知。...
recursivelyCollect
recursivelyCollect(element, property) -> [HTMLElement...]
通过递归获取和 element 相关的元素集合,元素的相关性由 property 参数指定,property 必须是 element 的一个属性(不能为方法!),指向单个 DOM 节点。该方法返回一个数组,数组元素已经过 扩展。
该方法用于在 Element.ancestors、 Element.descendants、 Element.nextSiblings、 Element.previousSiblings 和 Element.siblings 的内部,提供简捷的获取元素的途径,一般不需要直接访问它。当然, 如果你有一些不同寻常的需求,也可以选择使用它。
注意:所有 Prototype 的 DOM 扩展方法均忽略文本节点,仅返回元素节点。
...
readAttribute
readAttribute(element, attribute) -> String | null
返回 elemnet 由参数 attribute 指定的属性值,若不存在指定的属性值,返回 null。
提供这个方法主要是基于以下两个目的:首先,它对 getAttribute 做了简单的封装,在 Safari 和 Internet Explorer 下,getAttribute 并不是一个“真正”的函数对象(它没有 .apply 或 .call 实例方法)。 其次,它清理了 Internet Explorer 处理属性时造成的可怕的混乱。
样例
<a id="tag" href="/tags/prototype" rel="tag" title="view related bookmarks." my_widget="some info.">Prototyp...
previousSiblings
previousSiblings(element) -> [HTMLElement...]
返回 element 的所有前导兄弟节点,结果为一个数组,数组元素已经过 扩展。
如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和 body 是兄弟节点(它们的父节点都是 html)。前导兄弟节点可简单的看作文档中排在 elemnet 之前的兄弟节点。
返回的数组成员按照元素在页面中的顺序 反序 进行排列(例如:索引 0 表示距 element 最近的前导兄弟节点)。
注意:所有 Prototype 的 DOM 扩展方法均忽略文本节点,仅返回元素节点。
样例
<ul>
<li id="golden-delicious">Golden Delicious</li>
&...
previous
previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined
返回匹配 cssRule 指定规则的 element 的前一个兄弟节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule 参数,则默认匹配所有前导兄弟节点。 如果没有符合条件的节点,返回 undefined。
Element.previous 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.up、 Element.down 和 Element.next,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的前导兄弟节点进行精确选择。 (注意:如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和...
positionedOffset [1.6]
positionedOffset(element) -> [Number, Number] 或 { left: Number, top: Number }
以 element 的容器块(Containing Block)节点(译注:距离元素最近的 CSS position 属性为 relative 或 absolute 的先代节点)为坐标原点,返回 element 的坐标偏移值(元素的容器块节点可通过 Element#getOffsetParent 方法获取)。
译注:假定返回值为 offset,则 X 轴坐标可通过 offset[0] 获取,也可以通过 offset.left 获取,Y 轴坐标可通过 offset[1] 获取,也可通过 offset.top 获取。
这个方法其实是累加元素及其所有父元素的 offsetLeft 和 offsetTop,直...
observe
observe(element, eventName, handler[, useCapture = false]) -> HTMLElement
为 element 注册一个事件处理程序,返回元素本身。
这是对 Event.observe 的简单代理,更深入的信息请参考 Event.observe。
样例
$(element).observe('click', function(event){
alert(Event.element(event).innerHTML);
});
// -> HTMLElement(当元素被点击时,将弹出一个提示框,显示元素内的 HTML 文本)。
...
nextSiblings
nextSiblings(element) -> [HTMLElement...]
返回 element 的所有后继兄弟节点,结果为一个数组,数组元素已经过 扩展。
如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和 body 是兄弟节点(它们的父节点都是 html)。后继兄弟节点可简单的看作文档中跟在 elemnet 后的兄弟节点。
返回的数组成员按照元素在页面中的顺序进行排列(例如:索引 0 表示 element 正下方的第一个兄弟节点)。
注意:所有 Prototype 的 DOM 扩展方法均忽略文本节点,仅返回元素节点。
样例
<ul>
<li id="golden-delicious">Golden Delicious</li>
<li id="...
next
next(element[, cssRule][, index = 0]) -> HTMLElement | undefined
返回匹配 cssRule 指定规则的 element 的下一个兄弟节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule 参数,则默认匹配所有后继兄弟节点。 如果没有符合条件的节点,返回 undefined。
Element.next 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.up、 Element.down 和 Element.previous,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的后继兄弟节点进行精确选择。 (注意:如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和 body 是...