如何根据其他元素样式更改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元素的样式？

回答

相关问题