Onclick div 更改不同 div 的背景样式丢失了一些样式 css答案

【问题标题】：Onclick div to change background style of different div looses some styling cssOnclick div 更改不同 div 的背景样式丢失了一些样式 css
【发布时间】：2014-02-20 06:19:47
【问题描述】：

我认为这实际上很容易解决，但我很难过！

我使用 background-size:cover; 样式为 div 设置了背景图像，这使它填充了 div。这完美地工作。

问题来了，因为我在页面上有一个 onclick 命令来更改背景图像，这也很好。唯一的问题是，当我更改背景图像时，background-size:cover; 似乎丢失了。

我想知道是否将以下内容添加到 onlick 更改样式（就像我对 no-repeat center center fixed 所做的那样），但是当我这样做时，我破坏了一切。

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

HTML

<a href="#" onclick="
              document.getElementById('backgroundimage-gallery').style.background = 'url(images/galleries/art/<?php echo $row_images['name']; ?>.jpg) no-repeat center center fixed';" >
              <img src="images/galleries/art/<?php echo $row_images['name']; ?>.jpg" alt="" width="76" height="42" />
              </a>

CSS

#backgroundimage-gallery{ 
  background: url(images/backgrounds/galleries/photos-of-site.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【问题讨论】：

我没有发布它的原因很简单，因为它附加到一个包含所有内容的容器 div 上。我会尝试在上面创建一个 jsfiddle。
我在这里做了一个小提琴，这很好地说明了我认为jsfiddle.net/rSUXH的问题
终于开始整理了。非常感谢，工作就像一个 chalm，总是很高兴从这里学到一些东西 x
很高兴我能帮上忙——您的其他问题还需要帮助吗？

标签： image html background onclick

【解决方案1】：

如果您打开 chrome dev-tools 的控制台并输入var el = document.getElementById('backgroundimage-gallery');，您可以通过输入el.style.background = .... 来测试如何设置背景

我还没有测试过如何通过 javascript using the shorthand-property for background 设置样式。但我认为你的错误的原因就在那里。

这个demo should be what you are looking for

function setImage(theme)
{                           
    var imageUrl = "http://stackexchange.com/users/flair/774143.png?theme=" + theme;
    var el = document.getElementById('backgroundimage-gallery');    

    el.style.backgroundRepeat = "no-repeat";
    el.style.backgroundPosition = 'center center';
    el.style.backgroundImage = "url('" + imageUrl + "')";
    el.style.backgroundSize = 'cover';
}

还有这个html

<div class="container" id="backgroundimage-gallery">
   <div class="image-item">
     <a href="#" onclick="setImage('hotdog')" >
        <img src="http://stackexchange.com/users/flair/774143.png?theme=hotdog" 
             alt="" width="76" height="42" />
     </a>
  </div>        
  <div class="image-item">
     <a href="#" onclick="setImage('dark')" >
        <img src="http://stackexchange.com/users/flair/774143.png?theme=dark" 
             alt="" width="76" height="42" />
     </a>
  </div>            
</div>

【讨论】：