如何在单击按钮时更改多个 div 的样式答案

【问题标题】：How to change style of multiple div on click of a button如何在单击按钮时更改多个 div 的样式
【发布时间】：2022-01-25 17:27:51
【问题描述】：

我需要在单击具有相同名称的按钮时更改多个 div 的样式。我有一个按钮，用于创建带有图像的 div。

这是创建 div 的代码

function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');

$(divMark).append(img);
$(marksCanvas).append(divMark);
}

当我创建 div 时，我可以在浏览器上拖动该 div。现在我需要更改 div 的样式，但是当我按下按钮创建两个或更多 div 时，我只更改最后一个 div 的样式，其他 div 保持不变.

这是所有内容的代码：

var xCord;
var yCord;
var xLeft = 0;
var yTop = 0;

function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');

$(divMark).append(img);

window.onload = addListeners();

function addListeners() {
    divMark.addEventListener("mousedown", mouseDown, false);
    window.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
    window.removeEventListener("mousemove", divMove, true);
}

function mouseDown(e) {
    window.addEventListener("mousemove", divMove, true);
}

function divMove(e) {
    xCord = e.pageX;
    yCord = e.pageY;
    divMark.style.top = yCord + "px";
    divMark.style.left = xCord + "px";
}

zoomIn.onclick = function () {
    var myImg = document.getElementById("the-canvas");
    var currWidth = myImg.clientWidth;

    if (currWidth == 1200) return false;
    else {
        myImg.style.width = currWidth + 100 + "px";
    }

    xLeft += xCord + 25;
    yTop += yCord + 22;

    divMark.style.left = xLeft + "px";
    divMark.style.top = yTop + "px";

    xLeft -= xCord;
    yTop -= yCord;
};

zoomOutBtn.onclick = function () {
    var myImg = document.getElementById("the-canvas");
    var currWidth = myImg.clientWidth;
    if (currWidth == 800) return false;
    else {
        myImg.style.width = currWidth - 100 + "px";
    }
    xLeft += xCord - 25;
    yTop += yCord - 22;

    divMark.style.left = xLeft + "px";
    divMark.style.top = yTop + "px";

    xLeft -= xCord;
    yTop -= yCord;
};
}

这是演示https://jsfiddle.net/SutonJ/5gyqexhj/18/

【问题讨论】：

标签： javascript html jquery css zooming

【解决方案1】：

当您在 movediv 函数中引用 divmark 时，您指的是您创建的最后一个 div。相反，您应该引用该 div 的类，因为如果我理解正确，您制作的所有 div 都具有相同的类。因此，您可以使用 jquery 将样式添加到类中，如下所示：

$('.markers').css({'top': yCord + "px", 'left': xCord + "px"})

这将为所有具有markers 类的元素添加样式。如果您有该类的其他元素，您不想拥有这些样式，那么您应该为您在divmark.classList 创建的那些 div 添加一个独特的类。

【讨论】：

【解决方案2】：

你应该使用document.getElementsByClassName('<name of class>')

这样所有类名的div都会受到事件的影响。

【讨论】：