Question

所以我正在建立一个moch网站，我正在添加一个用CSS3和JavaScript缩放图像的图像，所以首先是我的代码。

HTML：

<img id="img" onclick="image()" class="contentimgleft" src="test.jpg">

CSS：

.contentimgleft {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 97%;
    height: 98%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}

JS：

function image() {
    if (document.getElementById("img").className.match(/(?:^|\s)contentimgleft(?!\S)/) ) {
        document.getElementById("img").className="contentimgleftl";
    } else {
        document.getElementById("img").className="contentimgleft";
    }
}

现在这完美无缺，直到您有多个图像。所以我正在寻找的是一个更好的系统，可以达到相同的效果。我已经尝试了几件事，但它不断回到拥有适用于所有图像的JavaScript代码，但每个图像都进行缩放。

除了.contentimgleft和.contentimgleftl之外，

width和height相同。所以我希望有一些方法可以使用相同的JavaScript代码将这两种样式更改为单个图像？

另请注意，右侧浮动图像也是一个类，但为了简单起见，我省略了它们，因为它们完全相同。

我尝试制作一个jsfiddle但由于某种原因它不喜欢(/(?:^|\s)位。

Answer 1

ID是唯一的，但没有什么可以阻止您在文档中多次使用相同的ID。但是，如果您有重复的ID，则document.getElementById("img") 通常会返回第一个ID - 请参阅behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?。因此，无论点击哪一个元素，您的代码都只会操纵第一个 id="img"元素。

因此，您应删除id属性，或为每个图片添加不同的id属性值。我怀疑你真的需要一个id所以在我下面的例子中他们已被删除了。

如果删除了id，则需要有一种方法可以使image()功能在点击的img上运行。 JavaScript（在其核心）具有scope的概念，我们可以使用它来使每个函数在正确的图像上执行。

一种方法是将参数this传递给onclick函数以访问处理事件的HTML元素 - 请参阅How does the "this" keyword work?

<强> HTML

<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/1"/>
<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/2"/>

<强>的JavaScript

function image(img) {
    if (img.className.match(/(?:^|\s)contentimgleft(?!\S)/)) {
        img.className = "contentimgleftl";
    } else {
        img.className = "contentimgleft";
    }
}

see demo

要回答CSS问题，是的，您可以声明重复属性一次，具体取决于您的操作方式，您可能需要更改JavaScript匹配类名的方式。

如果所有<img>元素都需要相同的样式，只需使用

即可

img {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    width: 97%;
    height: 98%;
}

但是如果需要，可以使用另一个CSS类作为公共属性，例如

.zoomable {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    width: 97%;
    height: 98%;
}

对HTML进行以下更改

<img onclick="image(this)" class="zoomable" src=""/>

但是，JavaScript需要更改为添加或删除 contentimgleftl类，而不是替换img的className，因为如果你只需要替换它，你将失去所有的.zoomable风格。

"hasClass" with javascript?，How do I add a class to a given element?，如果您决定使用该方法，Remove CSS class from element with JavaScript (no jQuery)可能会有用。

将JavaScript函数应用于多个元素

1 个答案: