JS遍歷頁面所有物件屬性及實作方法-js教程-PHP中文網

JS遍歷頁面所有物件屬性及實作方法

高洛峰

發布： 2017-01-14 11:11:56

原創

1578 人瀏覽過

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("属性 &#39;" + prop + "&#39; 为 " + 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,backgroundor:#d000, 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遍歷頁面所有物件屬性及實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支PHP中文網。 🎜🎜更多JS遍歷頁面所有物件屬性及實作方法相關文章請關注PHP中文網！ 🎜🎜🎜🎜