JS遍历页面所有对象属性及实现方法

 更新时间:2016年08月01日 09:26:34   投稿:jingxian  
下面小编就为大家带来一篇JS遍历页面所有对象属性及实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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使用eval或者new Function进行语法检查

    javascript使用eval或者new Function进行语法检查

    使用代码来实现分析代码的语法,这是一件极其痛苦的事情。简单的解决办法是:使用脚本引擎自己的语法检查,比方说eval( ) 或者new Function( )。
    2010-10-10
  • javascript 导出数据到Excel(处理table中的元素)

    javascript 导出数据到Excel(处理table中的元素)

    最近做的项目中有个要求,需要将数据导出到Excel中,关于这个就不是什么问题,网上的资料很多。可当Table中有Input(text)之类的元素是怎么办?
    2009-12-12
  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 浅谈javascript的原型继承

    浅谈javascript的原型继承

    javascript的继承在很多框架中都有运用,尤其是原型式继承。首先要理解一个概念,什么是原型式继承?所谓的原型式继承,就是在函数内部先创建一个临时性的构造函数,然后将传入的对象做这个构造函数的原型,最后返回这个临时类型的新实例
    2012-07-07
  • JS显示日历和天气的方法

    JS显示日历和天气的方法

    这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
    2016-03-03
  • Layui数据表格之获取表格中所有的数据方法

    Layui数据表格之获取表格中所有的数据方法

    今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript获得选中文本内容的方法

    JavaScript获得选中文本内容的方法

    今天希望实现一个,直接在网页上选中文本,点击收藏夹的链接(javascript)即可弹出新窗口(类似“百度搜藏”和“QQ书签”),新窗口中的文本框即显示了选中的文本。
    2008-12-12
  • JavaScript设计模式之单例模式

    JavaScript设计模式之单例模式

    单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Bootstarp基本模版学习教程

    Bootstarp基本模版学习教程

    这篇文章主要为大家详细介绍了Bootstarp基本模版学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论