JS traverses all object properties and implementation methods of the page-JS Tutorial-php.cn

JS traverses all object properties and implementation methods of the page

高洛峰

Release： 2017-01-14 11:11:56

Original

1682 people have browsed it

Javascript example of for...in loop:

<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("属性 &#39;" + prop + "&#39; 为 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>

Copy after login

Today, the Java Tang blog on the Internet found a method for traversing all the attribute names and values of a JavaScript object. This method is very intuitive and convenient when you want to use it. The code is as follows:

/*
* 用来遍历指定对象所有的属性名称和值
* 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 ) ;
}

Copy after login

AJAX’s JavaScript reflection mechanism. The reflection mechanism means that the program can obtain its own information when it is running. For example, an object can know at runtime what methods and properties it has. Use the for(...in...) statement to implement reflection in JavaScript. The syntax is as follows:

for(var p in obj){
//语句
}

Copy after login

In Ajax programming, it is often necessary to dynamically change the style of interface elements. This can be done through To change the style attribute of the object, for example, if you want to change the background color to red, you can write:

element.style.backgroundColor="#ff0000";

Basically, the properties in CSS are It can be used in JavaScript:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
}

Copy after login

Pass the entire style object directly as a parameter:

var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}

Copy after login

At this time, you can call the function like this:
setStyle(style);

or write it directly:
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

This code does not seem to have any problems, but in fact, when the parameter _style is used to assign a value to element.style inside the setStyle function, if the element already has a certain style, for example, it has been executed:
element.style.height="20px";

However, _style does not include the definition of height, so the height style of the element is lost, which is not the originally desired result. To solve this problem, you can use the reflection mechanism to rewrite the setStyle function:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}

Copy after login

The program traverses each attribute of _style to get the attribute name, and then uses square bracket syntax to set the element The corresponding attribute in .style is assigned the value of the corresponding attribute in _style. The above JS traversal of all object attributes and implementation methods on the page is all the content shared by the editor. I hope it can give you a For reference, I also hope that everyone will support PHP Chinese website.

For more articles related to JS traversing all object properties and implementation methods of the page, please pay attention to the PHP Chinese website!