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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
用console.table()调试javascript
Sep 04 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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
MVC模式的PHP实现
2006/10/09 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python解决八皇后问题示例
2018/04/22 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
学校党员干部承诺书
2015/05/04 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS