Prototype中使用Element对象

最新推荐文章于 2022-04-28 21:48:37 发布

原创最新推荐文章于 2022-04-28 21:48:37 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #JavaScript #XHTML #CSS #HTML #ViewUI

Prototype 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何利用Prototype.js库中的Element对象进行DOM操作，包括为元素添加CSS样式、控制元素的显示与隐藏以及调整元素的位置。通过具体的HTML示例展示了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

增加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>