如何在单击按钮时更改 div 的样式

Question

我有一个 canvas，里面有一个 pdf，具有缩放功能。 在 canvas 上，我可以单击一个按钮来创建一个带有图像的 div，然后将其拖到 canvas 上。

我的缩放功能用于更改 canvas 的宽度并使用图像更改 div 的样式。 我只更改左侧和顶部 position。

这是用于创建、拖动和缩放该 div 的代码：

let counter = 0

function createContent() {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
divMark.id = `${counter}`;

var img = document.createElement("img");
img.classList = "comment";
img.src = "indeksiraj-1.png";
img.alt = "myimage";

var pCounter = document.createElement("p");
pCounter.classList = "p-counter";
pCounter.innerHTML = showCounter;
divMark.appendChild(pCounter);

divMark.appendChild(img);

$(marksCanvas).append(divMark);

counter++;

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) {
var xCord = e.pageX;
var yCord = e.pageY;
divMark.style.top = yCord + "px";
divMark.style.left = xCord + "px";
divMark.onclick = function() {
  

  let index = parseInt(divMark.id);
  xList = removeXListItem(index, xList);


  xList.splice(parseInt(divMark.id), 0, xCord);
  yList.splice(parseInt(divMark.id), 0, yCord)

};
}
}


function xCordPlus(num) {
return num + 25;
}

function yCordPlus(num) {
return num + 22;
}

function xCordMinus(num) {
return num - 25;
}

function yCordMinus(num) {
return num - 22;
}

function removeXListItem(index, xList) {
xList.splice(index, 1);
return xList;
}

function zoomIn() {
var currWidth = myImg.clientWidth;
if (currWidth == 1000) return false;
else {
myImg.style.width = currWidth + 100 + "px";
}

xList = xList.map(xCordPlus);
yList = yList.map(yCordPlus);

$(".markers").each(function(index) {
$(this).css({
  top: yList[index] + "px",
  left: xList[index] + "px"
});
});
}

function zoomOut() {
var currWidth = myImg.clientWidth;
if (currWidth == 800) return false;
else {
myImg.style.width = currWidth - 100 + "px";
}

xList = xList.map(xCordMinus);
yList = yList.map(yCordMinus);

$(".markers").each(function(index) {
$(this).css({
  top: yList[index] + "px",
  left: xList[index] + "px"
});
});
}

这一切都很好，但我的问题是，当我将 div 放在 canvas 的右侧时，看起来更改 div 样式与 canvas 左侧的 ZFCC790C72A86190DE1BZ549D0 的左侧不一样看起来我需要增加左侧和顶部 position。

一开始它看起来像这样

但是当我放大到最大值时，它看起来像这样

第一个 div 指向它应该在的位置，但第二个它没有。

这是演示https://jsfiddle.net/SutonJ/x4u1y8jq/10/

Answer 1

这是单击按钮时更改 div 的背景颜色的方法：

 function change_color() { document.getElementById('div').style.backgroundColor = "red"; }

 #div { background-color: green; width: 100px; height: 100px; } button { margin-top: 10px; }

 <div id="div"> </div> <button onclick="change_color()">Change color</button>

Use the onclick function for html, then make a function which in my case is change_color() , then get the div id, and change the style with Javscript.