Question

要将图像放到屏幕宽度上，我在外部CSS文件中使用 img {max-width：100％} 。但是，在移动设备上（使用视口设备宽度）图像显得太小。我希望大部分它们，当点击时，获得原始大小，即将其各自的maxWidth属性更改为“none”，如果再次单击则更改为“”以将大小调整回100％屏幕宽度。两个问题：

是否可以使用纯css？
是否可以使用CSS设置为多个图像调用onclick的javascript例程？或任何替代解决方案（因为我猜CSS不能改变行为）

最糟糕的情况我会为每个要处理的img元素 onclick =“func（this）;”，这不是我想的那么优雅。谢谢。

编辑。那么还有另外一种方法 - 在加载后浏览所有图像并使用javascript设置它们的onclicks ...有更好的方法吗？

Answer 1

这是对另一个答案的一个小修改，考虑到您只想为移动设备提供此效果。当然，您可以使用媒体查询根据屏幕尺寸应用不同的样式;但是你仍然需要一些逻辑才能在点击事件上做点什么。

<强> CSS

div{

    width:40px;
}

img{
    max-width:100%
}

.clicked{
       max-width:none !important;  
}

<强>的jQuery

$('img').click(function(){
    if(window.innerWidth < 769){
        $(this).toggleClass('clicked');
    }
});

看看我的小提琴http://jsfiddle.net/augusto1982/7uKUs/

另请注意，我正在考虑移动设备的任何屏幕都比769px窄。您可以将其更改为适用于您用于确定设备是否为移动设备的任何逻辑。

这里有一个没有jQuery的解决方案，这需要每个图像添加一个onclick功能。

<强> HTML

<div>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);"/>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" />
</div

<强>的Javascript

  function toggleClass(obj){
    if(window.innerWidth < 769){ 
       if(obj.className.match(/\bclicked\b/)){
          obj.className = obj.className.replace('clicked', '');

       }else{
          obj.className += " clicked";
       }
    }
  }

单个HTML解决方案，每张图片不需要“onclick”

<div>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
</div>

<script>

    if(window.innerWidth < 769){
       var elements = document.getElementsByTagName('img'); 
       for (i = 0; i < elements.length; ++i) {
          elements[i].setAttribute('onclick','toggleClass(this)');
       }  
    }
    function toggleClass(obj){
          if(obj.className.match(/\bclicked\b/)){
             obj.className = obj.className.replace('clicked', ''); 
          }else{
             obj.className += " clicked";
          }
       }


</script>

必须在所有图像之后添加脚本。

演示：http://jsfiddle.net/augusto1982/L89m5/

Answer 2

就纯CSS实现而言，我能想到的最接近的是将每个图像包装在一个锚标记中，并使用标记的:active状态来更改CSS。但是，这只会在点击期间更改图片，并且一旦点击完成，该样式将恢复。

（例如：http://jsfiddle.net/kGs7Q/12/）

对于更简洁的JavaScript实现，您可以使用事件委派 - 一旦它们冒泡到共同的祖先就处理所有事件。这可以通过jQuery轻松实现：

HTML

<div class="image-wrapper"> <img src="http://..."/> <img src="http://..."/> </div>

JS

$('.image-wrapper').on('click', 'img', function(e) { $(this).toggleClass('clicked'); });

CSS

.image-wrapper img { max-width: 120px; } .image-wrapper img.clicked { max-width: none !important; }

（例如：http://jsfiddle.net/Vh7L3/3/）

CSS：onclick用于多个元素

2 个答案: