JavaScript面向对象实现页面元素的设计使用面向对象的方式

最新推荐文章于 2019-05-14 02:50:30 发布

l吕思玮

最新推荐文章于 2019-05-14 02:50:30 发布

阅读量312

点赞数 1

本文链接：https://blog.csdn.net/Lvsiwei0719/article/details/89500349

版权

在js中，所谓的对象，就是键值对的集合（形式）
语法结构：

key:value;

E:function（参数）{}，  
// 样式得传递参数

面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象

传统写入页面的方式：


<script type="text/javascript">
window.onload=function(){
var div_01=document.getElementsByTagName('div');
for (var i=0;i<div_01.length;i++) {
	div_01[i].style.border='1px solid red';
}
var p_01=document.getElementsByTagName('p');
for (var i=0;i<p_01.length;i++) {
	p_01[i].style.border='2px dashed yellow';
}
		}
		</script>
	</head>
	<body>
		<div>这是一个div</div>
		<p>这是一个段落</p>
	</body>

使用函数写入页面的方式：

function sel(name){
// parseInt字符串转数字
eturn document.getElementsByTagName(name);
}
var div=sel('div');
var p=sel('p');
function huoqusel(names){
		names[0].style.border='2px solid blue';
}
huoqusel(div);
huoqusel(p);

使用面向对象的方式

<head>
		<meta charset="UTF-8">
		<title></title>
<script type="text/javascript">
		window.onload = function() {
			var person = {
				// 获取页面元素的key
				getele: {
						// 后跟方法function
						id: function(a) {
							return document.getElementById(a);
						},
						tag: function(b) {
							return document.getElementsByTagName(b);
						},
						Class: function(c) {
							return document.getElementsByClassName(c);
						}
				},
				Style: {
						sty: function(d) {
							if(d.length==undefined){
								d.style.border='2px solid pink';
							}else{
								for(var i=0;i<d.length;i++){
									d[i].style.border='3px dashed yellow';
								}
							}
						}
				}
			}
				// 	给id的值div_1遍历个arr_4
				var arr_4=person.getele.id('div_1');
				// alert(arr_4);
				// 给person.Style.sty函数的参数(形参)设置实参arr_4
				person.Style.sty(arr_4);
				
				var arr_5=person.getele.id('p_1');
				person.Style.sty(arr_5);
		}
</script>
</head>
	<body>
		<div id="div_1">这是一个div</div>
		<p id="p_1">这是一个段落</p>
		<div class="div_2">第二个div</div>
		<h1>这是一个标签</h1>
	</body>

l吕思玮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面向对象实现页面元素的设计使用面向对象的方式

在js中，所谓的对象，就是键值对的集合（形式）语法结构：key:value;E:function（参数）{}， // 样式得传递参数面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现面向对象则是关注的实现功能的一系列的对象传统写入页面的方式：<script type="text/javascript">window.onload=function()...
复制链接

扫一扫