Maison > interface Web > js tutoriel > Explication détaillée du mécanisme de réflexion ajax et du code pour parcourir toutes les propriétés et valeurs des objets

Explication détaillée du mécanisme de réflexion ajax et du code pour parcourir toutes les propriétés et valeurs des objets

伊谢尔伦
Libérer: 2017-07-21 13:33:57
original
1338 Les gens l'ont consulté

Exemple Javascript de 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>
Copier après la connexion
/*
* 用来遍历指定对象所有的属性名称和值
* 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 ) ;
}
Copier après la connexion

Le mécanisme de réflexion JavaScript d'AJAX Le mécanisme de réflexion signifie que le programme peut obtenir ses propres informations lorsqu'il est en cours d'exécution. Par exemple, un objet peut savoir au moment de l’exécution de quelles méthodes et propriétés il dispose. Utilisez l'instruction for(…in…) pour implémenter la réflexion en JavaScript. La syntaxe est la suivante :

for(var p in obj){
//语句
}
Copier après la connexion

En programmation Ajax, il est souvent nécessaire de changer dynamiquement le style des éléments d'interface. fait via l'attribut style de l'objet. Pour changer, par exemple, si vous souhaitez changer la couleur de fond en rouge, vous pouvez écrire comme ceci :

element.style.backgroundColor="#ff0000";
Copier après la connexion

En gros, toutes les propriétés en CSS peuvent être utilisé en JavaScript :

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

Changer directement l'intégralité de l'objet style est passé en paramètre :

var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}
Copier après la connexion

A ce moment, la fonction peut être appelée comme ceci :
setStyle(style);

ou écrit directement comme :

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});
Copier après la connexion

Ce code ne semble pas avoir de problèmes, mais en fait, lorsque le paramètre _style est utilisé pour attribuez une valeur à element.style dans la fonction setStyle, si l'élément a déjà un certain style, par exemple s'il a été exécuté :
element.style.height="20px";

Cependant, _style n'inclut pas la définition de la hauteur, donc le style de hauteur de l'élément est perdu, ce qui n'est pas le résultat initialement souhaité. Pour résoudre ce problème, vous pouvez utiliser le mécanisme de réflexion pour réécrire la fonction setStyle :

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

Dans le programme, parcourez chaque attribut de _style pour obtenir le nom de l'attribut, puis utilisez la syntaxe des crochets pour modifier l'attribut dans element.style L'affectation d'attribut correspondante est

de l'attribut correspondant dans _style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal