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中Object和Function的关系小结
Sep 26 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vscode中使用npm安装babel的方法
Aug 02 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判断是否有Get参数的方法
2014/05/05 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
python使用心得之获得github代码库列表
2014/06/25 Python
Python动态加载模块的3种方法
2014/11/22 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
在python中求分布函数相关的包实例
2020/04/15 Python
基于python 凸包问题的解决
2020/04/16 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
教师的实习鉴定
2013/12/15 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
先进基层党组织材料
2014/12/25 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
教师节班会主持词
2015/07/06 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技