當多個DIV共享相同的ID時查找DIV寬度

我已搜索整天，無法找到我的問題的答案。當多個DIV共享相同的ID時查找DIV寬度

我有如下因素DIV設置：

<div id="MainDiv1"> 
    <div id="Galery1"> 
     <div id="Image" style="width:100px;"></div> 
     <div id="Image" style="width:100px;"></div> 
     <div id="Image" style="width:100px;"></div> 
    </div> 
</div> 
<div id="MainDiv2"> 
    <div id="Galery2"> 
     <div id="Image" style="width:80px;"></div> 
     <div id="Image" style="width:80px;"></div> 
     <div id="Image" style="width:80px;"></div> 
    </div> 
</div>

我需要的是，使用JavaScript，設置一個變量與任何「圖像」 DIV的寬度，但只有那些在「Galery1 」。因爲它們都具有相同的寬度，所以它們都可以工作。

我已經tryed：

DIVwidth = document.getElementById("Image");

但這總是給我回80px，是從「Galery2」 DIV。我假設我必須給出一個路徑，以限制搜索到「Galery1」或「MainDiv1」DIV。

我無法賦予DIV唯一的名稱。

有什麼建議嗎？

來源

2013-01-03 Vicente Chazard

你不應該具有相同ID的多個元素。你應該用'class'來代替。 – Lukas

@Lukas：這應該是答案 – iamnotmaynard

在任何計算領域中的ID都應該總是用來**唯一**標識一個* thing *。這是你的問題。 –

ID應該是唯一的。 I.E.你不應該有一個以上的id="Image"

要選擇Gallery2第一個div試試這個：

document.getElementById('Gallery2').getElementsByTagName('div')[0]; // <-- '0' gets first item from array

來源

2013-01-03 19:46:20

這正是我正在尋找的。剛剛測試過，它效果很好。我將遵循所有以前的意見，關於不使用相同的ID爲多個DIV，並會在我的代碼中做適當的更改。謝謝大家的幫助。 –

首先它會幫助你瞭解IDS和類之間的區別：http://css-tricks.com/the-difference-between-id-and-class/

記住，您應該將所有Image ID的元素都更改爲Image Classed元素：

<div id="MainDiv1"> 
    <div id="Galery1"> 
     <div class="Image" style="width:100px;"></div> 
     <div class="Image" style="width:100px;"></div> 
     <div class="Image" style="width:100px;"></div> 
    </div> 
</div> 
<div id="MainDiv2"> 
    <div id="Galery2"> 
     <div class="Image" style="width:80px;"></div> 
     <div class="Image" style="width:80px;"></div> 
     <div class="Image" style="width:80px;"></div> 
    </div> 
</div>

從圖庫1選擇圖像簡單地變爲：

document.getElementById("Galery1").getElementsByClassName('Image')[0]

document.getElementById("Galery1").getElementsByClassName('Image')將返回匹配的元件的陣列（元素與類的「圖像」與ID「Galery1」的元素下嵌套）和[0]選擇返回數組的第一個索引。

或者，你可以做簡單的選擇頁面上的第一個影像：document.getElementsByClassName('Image')

來源

2013-01-03 20:00:09

當多個DIV共享相同的ID時查找DIV寬度

回答

相關問題