Home > Article > Web Front-end > Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values

Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values

伊谢尔伦Original: 2017-07-21 13:33:571314browse

For...in loop Javascript example:

<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>

/*
* 用来遍历指定对象所有的属性名称和值
* 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's JavaScript reflection mechanism. The reflection mechanism refers to the ability of the program to obtain its own information while 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){
//语句
}

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

element.style.backgroundColor="#ff0000";

Basically, all the properties in CSS can be used in JavaScript:

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

Directly pass the entire style object as a parameter Come in:

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

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

or write it directly as:

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

This code looks like There is no problem, 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];
}
}

The program traverses each attribute of _style to get the attribute name, and then uses square bracket syntax to set the corresponding attribute in element.style The attribute assignment is the

of the corresponding attribute in _style

The above is the detailed content of Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code sharing on how to use JavaScript to dynamically change the src attribute of an iframeNext article：Sample code sharing on how to use JavaScript to dynamically change the src attribute of an iframe

See more

Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values

Related articles