Question

在我的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>

样式也应该更改为display：none;如果img元素样式是display：block;然后上面的Elements样式也应该更改为display：block;自动。

如何实现这一目标？

Answer 1

在函数中添加其他元素。像这样：

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

或者如果你把它们放在一个容器中，你可以对整个容器进行一次操作=）

Answer 2

如果我已经正确地理解了你，那么你的理解就是

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

如果这个函数对于这个图像和desciption是唯一的，那么这应该很好用，显然如果有一大堆图像你正在应用这个逻辑，那么有一个更有效的方法来实现这个通用函数

Answer 3

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

如何根据其他元素样式更改HTML元素的样式？

3 个答案: