JS遍历页面所有对象属性及实现方法


Posted in Javascript onAugust 01, 2016

for...in循环的Javascript示例:

<html>
<head>
<title>一个使用到for...in循环的Javascript示例</title>
</head>
<body>
<script type="text/javascript">
// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "网页教程代码图库的中文站点";
//遍历对象的所有属性
for (prop in myObject)
{
document.write("属性 '" + prop + "' 为 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>

今天网上Java Tang博客找到了一个用来遍历JavaScript某个对象所有的属性名称和值的方法,这样想使用方法的时候非常的直观和方便。代码如下:

/* 
* 用来遍历指定对象所有的属性名称和值 
* obj 需要遍历的对象 
* author: Jet Mah 
*/ 
function allPrpos ( obj ) { 
// 用来保存所有的属性名称和值 
var props = "" ; 
// 开始遍历 
for ( var p in obj ){ 
// 方法 
if ( typeof ( obj [ p ]) == " function " ){ 
obj [ p ]() ; 
} else { 
// p 为属性名称,obj[p]为对应属性的值 
props += p + " = " + obj [ p ] + " \t " ; 
} 
} 
// 最后显示所有的属性 
alert ( props ) ; 
}

AJAX的JavaScript的反射机制,反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。 在JavaScript中利用for(…in…)语句实现反射,其语法如下:

for(var p in obj){ 
//语句 
}

在Ajax编程中,经常要能动态的改变界面元素的样式,这可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:

element.style.backgroundColor="#ff0000";

基本上CSS里拥有的属性在JavaScript中都能够使用:

function setStyle(_style){ 
//得到要改变样式的界面对象 
var element=getElement(); 
element.style=_style; 
}

直接将整个style对象作为参数传递了进来:

var style={ 
color:#ffffff, 
backgroundColor:#ff0000, 
borderWidth:2px 
}

这时可以这样调用函数:
setStyle(style);

或者直接写为:
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

这段代码看上去没有任何问题,但实际上,在setStyle函数内部使用参数_style为element.style赋值时,如果element原先已经有了一定的样式,例如曾经执行过:
element.style.height="20px";

而_style中却没有包括对height的定义,因此element的height样式就丢失了,不是最初所要的结果。要解决这个问题,可以用反射机制来重写setStyle函数:

function setStyle(_style){ 
//得到要改变样式的界面对象 
var element=getElement(); 
for(var p in _style){ 
element.style[p]=_style[p]; 
} 
}

程序中遍历_style的每个属性,得到属性名称,然后再使用方括号语法将element.style中的对应的属性赋值为_style中的相应属性的

以上这篇JS遍历页面所有对象属性及实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
VUE中使用MUI方法
Feb 12 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 #Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 #Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 #Javascript
Three.js学习之正交投影照相机
Aug 01 #Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 #Javascript
JQuery之proxy实现绑定代理方法
Aug 01 #Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php你的验证码安全码?
2007/01/02 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
PHP守护进程实例
2015/03/06 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery使用方法
2017/02/04 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python translator使用实例
2008/09/06 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python语音识别实践之百度语音API
2018/08/30 Python
python基础 range的用法解析
2019/08/23 Python
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
优秀干部获奖感言
2014/01/31 职场文书
行政副总岗位职责
2014/02/23 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP