如何根据另一个元素的样式改变HTML元素的样式

How to change style of HTML element depending on another elements style?

本文关键字：样式 元素 改变 HTML 何根 另一个      更新时间：2023-09-26

在我的Web应用程序中，我正在使用javascript更改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元素的样式是display:none;Elements 

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

style也应该改为display:none;如果img elements style是display:block;那么上面的元素样式也应该改为display:block;自动.

这是如何实现的?

也在函数中添加另一个元素。像这样:

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";
    }
}

或者如果你把两个都放在一个容器中你可以对整个容器进行一次操作=)

如果我没理解错的话，那么你在这之后

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
  }
}

如果这个函数对这个图像和描述是唯一的，那么这应该很好地工作，显然，如果有一大堆图像，你要应用这个逻辑，那么有一个更有效的方法来实现这个通用函数

我建议只使用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/

相关文章：