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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
Vue中对比scoped css和css module的区别
May 17 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_SELF的安全问题
2009/09/05 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python 性能提升的几种方法
2016/07/15 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python模块WSGI使用详解
2018/02/02 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python pip如何手动安装二进制包
2020/09/30 Python
捐书寄语赠言
2014/01/18 职场文书
上级检查欢迎词
2014/01/18 职场文书
销售人员获奖感言
2014/02/05 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014司机年终工作总结
2014/12/05 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android