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获取页面窗口大小的代码解读
Dec 01 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
window.open()实现post传递参数
Mar 12 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript JSON数据处理全集(小结)
Aug 15 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
wordpress之wp-settings.php
2007/08/17 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
php和nginx交互实例讲解
2019/09/24 PHP
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中元类用法实例
2014/10/10 Python
详解Python中break语句的用法
2015/05/14 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
用python计算文件的MD5值
2020/12/23 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
单位领导证婚词
2014/01/14 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
公司承诺书怎么写
2014/05/24 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python