JavaScript面向对象实现页面元素设计案例

最新推荐文章于 2021-09-17 17:40:10 发布

王梦翰

最新推荐文章于 2021-09-17 17:40:10 发布

阅读量485

点赞数

文章标签：面向对象函数封装优化代码

本文链接：https://blog.csdn.net/ITwangmenghan/article/details/89500503

版权

设置页面中的 `div` 和 `p` 的样式

1、传统方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var div=document.getElementsByTagName('div');
				var p=document.getElementsByTagName('p');
				// alert(p);   // [object HTMLCollection]
				// 直接选择第一个索引设置
				//div[0].style.border='1px solid red';
				//p[0].style.border='2px solid yellow';
				// 通过for循环给所有的div与p设置
				for (var i=0;i<div.length;i++) {
					div[i].style.border='1px solid red';
				}
				for (var i=0;i<div.length;i++) {
					p[i].style.border='2px solid yellow';
				}
			}
		</script>
	</head>
	<body>
		<div>第一个div</div>
		<div>第二个div</div>
		<p>第一个段落标签</p>
		<p>第二个段落标签</p>
	</body>
</html>

2、函数封装：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				function huoqu(names){
					return document.getElementsByTagName(names);
				}
				var div=huoqu('div');
				var p=huoqu('p');
				// alert(p);
				function shezhi(names){
					for(var i=0;i<names.length;i++){
						
						names[i].style.border="solid 1px red";
					}
				}
				shezhi(div);
				shezhi(p);
				
				
				/*function shezhi(names,a,b,c){
					names[0].style.border='a b c';
				}
				shezhi(div,'1px','solid','red');
				shezhi(p,'2px','solid','yellow')*/
				
				
			}
		</script>
	</head>
	<body>
		<div>第一个div</div>
		<div>第二个div</div>
		<p>第一个段落标签</p>
		<p>第二个段落标签</p>
	</body>
</html>

3、面向对象的方式：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var hanshu = {
					//键值对的集合
					// 键:值,
					// 键:值,
					// 封装获取元素的方法
					getIt: {
						ids: function(byId) {
							// 通过id名称获取对象，然后返回给ids
							return document.getElementById(byId);
						},
						tag: function(byName) {
							// 通过标签名获取对象，然后返还给tag
							return document.getElementsByTagName(byName);
						}
					},
					// 封装设置样式的方法
					shezhi: {
						shezhi01: function(duixiang) {
							// 判断对象是对象还是集合，集合的话就得加索引遍历
							//E.length=undefined表示是一个标签，不是集合，id获取到的都是html标签，
							// E.length！=undefined，那就是集合，如class，tagname，name获取得都是集合
							if(duixiang.length == undefined) {
								// alert(duixiang01.length)
								duixiang.style.border = 'solid 1px red';
								duixiang.style.width = 200 + 'px';
								duixiang.style.height = 200 + 'px';
								duixiang.style.background = 'yellow';

							} else {
								for(var i = 0; i < duixiang.length; i++) {
									duixiang[i].style.border = 'solid 1px yellow';
									duixiang[i].style.width = 150 + 'px';
									duixiang[i].style.height = 150 + 'px';
									duixiang[i].style.background = 'pink';
								}
							}
						}
					}
					// var div_01 =hanshu.getIt.ids('div_01');
					// alert(div_01);
					// var p01=hanshu.getIt.tag('p');
					// alert(p01)
				}
				var div01 = hanshu.getIt.ids('div_01');
				hanshu.shezhi.shezhi01(div01); // 传递进去的是一个标签，不能加引号，加引号就成了那啥了
				var p01 = hanshu.getIt.tag('p');
				hanshu.shezhi.shezhi01(p01); // 传递进去的是一个标签，不能加引号
			}
		</script>
	</head>

	<body>
		<div id="div_01">第一个div</div>
		<p>第一个段落标签</p>
	</body>

</html>

王梦翰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面向对象实现页面元素设计案例

设置页面中的 div 和 p 的样式1、传统方法:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=functi...
复制链接

扫一扫