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判断单个复选框是否被选中的代码
Sep 03 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
使用JS实现动态时钟
Mar 12 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
如何开发一个虚拟域名系统
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
javaScript语法总结
2016/11/25 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
高校教师思想汇报
2014/01/11 职场文书
精彩自我鉴定
2014/01/16 职场文书
特教教师先进事迹
2014/05/21 职场文书
局火灾防控工作方案
2014/05/25 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫