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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
vue-cli常用设置总结
Feb 24 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
pm2发布node配置文件ecosystem.json详解
May 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
php adodb分页实现代码
2009/03/19 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
用js编写留言板
2020/03/17 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python flask搭建web应用教程
2019/11/19 Python
python中类与对象之间的关系详解
2020/12/16 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
另类冲刺标语
2014/06/24 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2015入党自传书范文
2015/06/26 职场文书
python实现简易名片管理系统
2021/04/11 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers