Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

139
Visualizações
How to change style of multiple div on click of a button

I need to change style of multiple divs on click of a button that have the same name.I have the button where I create div with image.

This is code for creating the 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);
}

When I create div I can drag that div on browser.Now I need to change the style of div but when I create two div or more when I press the button I change style just of the last div other div stay the same.

This is code for everything:

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

This is demo https://jsfiddle.net/SutonJ/5gyqexhj/18/

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You should use document.getElementsByClassName('<name of class>')

That way all the divs with the class name will be affected by the event.

about 4 years ago · Juan Pablo Isaza Relatório

0

When you are referring to divmark at the movediv function you are referring to the last div you made. Instead you should refer to a class of that div since all of the divs you made have the same classes if I understand correctly. So you can use jquery to add the style to the class like so:

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

That will add the styling to all the elements that have the class markers. If you have other elements with that class that you do not want to have those styles then you should add a unique class for those divs you made at divmark.classList.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda