如何根據其他元素樣式更改HTML元素的樣式？

在我的Web應用程序中，我正在使用javascript更改HTML元素的樣式。如何根據其他元素樣式更改HTML元素的樣式？

見是下面的代碼，

function layout() { 
    if(document.getElementById('sh1').getAttribute('src') == "abc.png") { 
     document.getElementById("sh1").style.display="none"; 
    } else { 
     document.getElementById("sh1").style.display="block"; 
    } 
}

和HTML是：

<img id="sh1" src="abc.png" />

現在我想，如果在img元素中的風格顯示：無;然後下面元素

<p id="Text1">Name<br />description</p>

風格也應該改爲顯示：無;如果img元素的樣式是display：block;那麼上面的Elements風格也應該改爲display：block;自動。

這是如何實現的？

來源

2013-05-14 user2139497

你爲什麼不換他們使用div標籤，只是更改div標籤的display：none或塊隱藏所有elments裏面 – 2013-05-14 13:12:32

你有使用jQuery的任何夸克，這在jQuery中很容易。 – Cam 2013-05-14 13:12:54

使用CSS類。 – SLaks 2013-05-14 13:13:08

也在你的函數中添加其他元素。事情是這樣的：

function layout(){ 
    if(document.getElementById('sh1').getAttribute('src') == "abc.png"){ 
     document.getElementById("sh1").style.display="none"; 
     document.getElementById("Text1").style.display="none"; 
    } else { 
     document.getElementById("sh1").style.display="block"; 
     document.getElementById("Text1").style.display="Block"; 
    } 
}

，或者如果你在一個容器中放你都可以在整個容器上做一次操作=）

來源

2013-05-14 13:12:17

如果我理解正確的話，你那麼你在這之後

function layout(){ 
    if(document.getElementById('sh1').getAttribute('src') == "abc.png"){ 
    document.getElementById("sh1").style.display="none"; 
    document.getElementById("Text1").style.display = "none"; //Hide the description 
    } else { 
    document.getElementById("sh1").style.display="block"; 
    document.getElementById("Text1").style.display="block"; //Show the description 
    } 
}

如果這個函數對於這個圖像和描述是獨一無二的，那麼這應該很好地工作，很明顯，如果有一大堆圖像，你正在應用這個邏輯，然後有一個更有效的方式來實現這個通用函數。

來源

2013-05-14 13:12:40

我會建議只使用jQuery並更改標記以將圖像和文本包裝在一起。查看一個工作示例的鏈接。

<figure id="sh1" class="picture active"> 
    <img src="http://placehold.it/100x100&text=abc.png" /> 
    <figcaption><span class="name">ABC</span><span class="desc">This is a description</span> 
    </figcaption> 
</figure> 

<figure id="sh2" class="picture"> 
    <img src="http://placehold.it/100x100&text=xyz.png" /> 
    <figcaption><span class="name">XYZ</span><span class="desc">This is a description</span> 
    </figcaption> 
</figure>

http://jsfiddle.net/Qvb4U/1/

來源

2013-05-14 13:30:50

如何根據其他元素樣式更改HTML元素的樣式？

回答

相關問題