從元素

獲取childnode我有以下代碼：從元素

<div class="className" id="div-1" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-2" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-3" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div>

我想給單擊元素的跨度一些造型，但我寧願使用父元素的ID爲參考，而不是給每個跨度也是一個id。

我已經試過這一點，但它不工作：

function selPic(id) { 
    document.getElementById(id).childNone[0].style.opacity = "1"; 
}

任何想法？

來源

2014-11-21 Chris

訪問元素1的childNodes（未childNode）的陣列修改跨度不透明度：

document.getElementById(id).childNodes[1].style.opacity = "1";

來源

2014-11-21 08:33:48

是的，這個工作！除了應該是childNodes的childNode，我也有錯誤的數字（應該是[1]不是[0]）。謝謝！ – Chris 2014-11-21 08:36:07

我很高興爲您提供幫助。所以請將我的答案標記爲有效的答案:)。 – 2014-11-21 08:39:28

這種方法只能偶然使用。您永遠不會知道索引是否應爲0或1，因爲在跨度之前可能有一個不可見的子節點。查看我的答案以獲得更強大的解決方案。 – 2014-11-21 08:55:00

只是糾正錯別字在代碼：

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
}

來源

2014-11-21 08:27:41 hon2a

更換childNone與childNodes。

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
}

來源

2014-11-21 08:27:52

應該的childNodes沒有childNode：

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
}

此外，習慣於使用返回功能：

function selPic(id) { 
    var ss = document.getElementById(id).childNodes[0].style.opacity = "1"; 
    return ss; 
}

來源

2014-11-21 08:28:16

你有一點錯誤代碼

function selPic(id) { 
document.getElementById(id).childNodes[0].style.opacity = "1"; 
}

來源

2014-11-21 08:28:36

您通過索引號選擇子節點的想法一般不起作用。這是因爲你無法確切知道span元素的數量。根據您構建列表的方式，在您感興趣的跨度之前可能會有不可見的子節點，例如空白文本節點。這就是爲什麼你驚訝地發現你不得不使用索引值1而不是0.

更健壯的方法是在父元素上調用getElementsByTagName('span')來檢索其中的所有跨度。然後獲取返回數組中的第一個項目。

此外，我建議函數的參數應該是你想要突出顯示的元素，而不僅僅是元素的ID。如果你按照我的建議，你的HTML應該是這樣的：

<div class="className" id="div-1" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-2" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-3" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div>

和函數應該是這樣的：

function selectPicture(container) { 
    container.getElementsByTagName('span')[0].style.opacity = 1; 
}

它甚至會更好地修改的className實現風格轉換跨度和寫適當的CSS，但我會留下這些考慮因素給你。

來源

2014-11-21 08:30:22

回答

相關問題