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 相关文章推荐
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python pdb调试方法分享
2014/01/21 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
详解Python中for循环是如何工作的
2017/06/30 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python多进程并发demo实例解析
2019/12/13 Python
keras打印loss对权重的导数方式
2020/06/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
教育专业自荐书范文
2013/12/17 职场文书
运动会邀请函范文
2014/02/06 职场文书
个性与发展自我评价
2014/02/11 职场文书
火箭队口号
2014/06/18 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年手术室工作总结
2014/11/26 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript