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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
SONY ICF-F10中波修复记
2021/03/02 无线电
加速XP搜索功能堪比vista
2007/03/22 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python之eval()函数危险性浅析
2014/07/03 Python
详解supervisor使用教程
2017/11/21 Python
Python线性方程组求解运算示例
2018/01/17 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python笔记之工厂模式
2019/11/20 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
好好学习保证书
2015/02/26 职场文书
护士自我推荐信范文
2015/03/24 职场文书
python 逐步回归算法
2021/04/06 Python
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python