增加CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用Element对象</title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<style type="text/css">
.solid {
width: 160px;
text-align: center;
border-right: #002200 2px solid;
border-top: #b9ffb9 2px solid;
border-left: #b9ffb9 2px solid;
border-bottom: #002200 2px solid;
color: #ffff00;
background-color: #008000;
}
</style>
</head>
<body>
<input type="button" onclick="chg();" value="增加立体效果" />
<div id="up">
有立体效果的层
</div>
<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
function chg() {
//为up元素增加solid的CSS样式
//Element.addClassName("up", "solid"); //或
$("up").addClassName("solid");
}
</script>
</body>
</html>
控制元素的显示和隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用Element对象</title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input type="button" onclick="chg();" value="切换显示" />
<div id="div1">
层1
</div>
<div id="div2">
层2
</div>
<div id="div3">
层3
</div>
<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
function chg() {
//同时控制div1 div2 div3三个元素的显示和隐藏
Element.toggle("div1");
Element.toggle("div2");
Element.toggle("div3");
}
</script>
</body>
</html>
位置的处理，通过控制left和top来处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用Element对象</title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input type="button" onclick="set();" value="设置postion" />
<input type="button" onclick="unset();" value="取消postion" />
<div id="div1" style="left: 80px; top: 20px;">
移动的层
</div>
<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
function set() {
//设置起style.postion属性为relative
Element.makePositioned("div1");
}
function unset() {
//设置style.position属性为""
Element.undoPositioned("div1");
}
</script>
</body>
</html>
分享到：
相关推荐
在DOM操作方面，Prototype提供了一套强大的DOM操作接口，如Element.extend()、Element.update()、Element.insert()等，这些方法使得在JavaScript中操作DOM元素变得简单易懂。同时，Prototype的Event模块允许我们方便...
《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南，该库是Web开发中的一个强大工具，尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm（Compiled Help Manual）格式提供，...
标题"Prototype中英文手册"指出，我们关注的是一个名为"Prototype"的JavaScript库的文档集合，这个文档提供了中英文两种语言版本，帮助开发者理解和使用该库。 描述进一步细化了内容，包括"Prototype中文手册"和...
将这个文件引入到HTML中，就可以在网页中使用Prototype提供的各种功能。 综上所述，Prototype是一个功能丰富的JavaScript库，它通过面向对象的编程模型、强大的DOM操作、高效的Ajax支持、动画效果、JSON处理以及...
1. **DOM操作**：Prototype.js 提供了丰富的DOM操作API，如$()函数用于元素选择，$$()用于选取多个元素，Element对象提供了各种对元素的操作方法，如appendChild、removeChild等。 2. **事件处理**：Prototype.js ...
- 对document DOM对象和Event对象进行了增强，如Element对象提供了许多方便的DOM操作方法。 - 引入了新的类，如PeriodicalExecuter，定时执行任务；Ajax对象，包括Ajax.Base、Ajax.Request和Ajax.Updater等，实现...
Prototype 是一个广泛使用的JavaScript库，它为浏览器端的开发提供了许多强大的功能，特别是对于处理DOM操作、Ajax交互以及对象扩展等方面。这个“prototype帮助中文文档”涵盖了Prototype库的核心概念、方法和最佳...
Prototype.js 是一个广泛使用的JavaScript库，它为JavaScript编程提供了许多实用的功能，极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...
3. **核心功能**：介绍Prototype的核心函数和对象，如`$`（选择元素）、`$$`（选择多个元素）、`Element`、`Event`、`Ajax`等，这些函数极大地增强了原生JavaScript的能力。 4. **DOM操作**：详细阐述了如何使用...
`$`函数是Prototype中最常使用的函数之一，它接受一个或多个DOM元素的选择器，返回扩展后的元素对象。在代码中，我们可以看到`$`函数如何处理多参数情况，以及如何通过`Element.extend`将DOM对象转换为具有额外方法...
在基础概念中，读者可以了解到Prototype如何扩展JavaScript的基本类型，如Array、String和Function，以及如何使用$$选择器来快速选取DOM元素。对象操作部分则讲解了Prototype如何支持面向对象的编程，如Class构造...
例如，`Object.extend()`方法用于合并两个或更多对象的属性到第一个对象中，实现了类似CSS中的继承概念。`Object.clone()`则用于创建一个对象的浅复制，保留原始对象的所有属性，但不包括引用类型的值。 ### 2. DOM...
1. **Selectors**：Prototype.js 使用CSS选择器语法来选取DOM元素，这使得从复杂的HTML结构中选取元素变得简单，如`$$('div.some-class')`。 2. **Element和Form Methods**：提供了一系列直接操作DOM元素和表单的...
Prototype 1.4引入了许多方便的DOM操作方法，如$()选择器，以及Element对象的方法，使得处理HTML元素变得更为简洁。同时，它也提供了Ajax类，使得异步通信更加容易。而Prototype 1.5则是在1.4的基础上进行了优化和...
Prototype的核心目标是扩展JavaScript的基础功能，使得在浏览器环境中进行对象导向编程变得更加容易和强大。以下是一些Prototype的关键知识点： 1. **对象扩展**：Prototype通过`Object.extend()`方法提供了对...
1. **DOM操作**：Prototype 提供了丰富的DOM操作方法，如`$`用于选取元素，`$$`用于选取多个元素，以及`Element`对象下的各种实用方法，如`appendChild`、`insertBefore`等。 2. **事件处理**：Prototype 提供了...
在JavaScript中，`prototype`是一个核心概念，它关乎对象的继承机制。`prototype.js`是一个开源库，旨在扩展JavaScript的基础功能，尤其是面向对象编程的支持。这个库由Sam Stephenson创建，是Prototype Library的一...
在DOM操作方面，Prototype提供了一套强大的API，如$$函数用于选择DOM元素，Element对象包含了大量对单个元素进行操作的方法，如hide()、show()、toggle()等，这些方法极大地简化了页面元素的动态控制。此外，还有一...
Prototype 1.6 API 是一个JavaScript库的重要版本，它提供了许多实用的功能，使得在JavaScript中进行面向对象编程变得更加简单和高效。这个API中文版的发布，对于中文开发者来说，无疑是一个极大的福音，因为它帮助...
如果`element`是数组，`$`方法会返回一个元素数组，并且会自动调用`Element.extend(element)`，这样元素就可以直接调用`Element`对象中的方法，如`Element.hide(element)`可以简洁地写成`$(element).hide()`。...