JavaScript 画布样式未在代码中设置

Question

我正在尝试动态调整left画布的位置。宽度和高度可以改变，我知道left需要一些快速网络搜索的 CSS。这就是我所得到的：HTML： <canvas id="output2" class="camera-canvas2"></canvas>CSS：.camera-canvas2 {            position: absolute;            transform: scale(1, 1);            transform-origin: 0 0;            left: 510px;            top: 10px;        }JavaScript：var canvas2 = document.getElementById('output2');// Need to adjust right (canvas2) position    let newOffset = Math.round(510-rightVideoOffset);    let styleString = '"'+String(newOffset)+'px"'; //"510px" is default    canvas2.style.left = styleString    console.log("canvas2.style.left: "+String(canvas2.style.left)+" // "+styleString);我有一个可以切换值的按钮rightVideoOffset，对于使用该变量的另一个功能来说效果很好。然而检查日志，这style.left似乎没有做任何事情（下面的控制台日志）：canvas2.style.left:  // "420px" 从视觉上看，什么也没有发生。在上面的日志中，它应该打印 style.left 的变量值，但当我尝试检查它时它是空白的。我该如何解决这个问题并使用 JS 动态地将画布位置向左移动？

Answer 1

用引号“填充” styleString 并不能帮助它注册为字符串。相反，它只是在字符串末尾添加引号。这不是按510px预期创建一个字符串，而是创建一个包含 content 的字符串"510px"，这对于 CSS 来说是无效输入，因此 Javascript 只是忽略它而不执行任何操作。

相反，你应该写一些类似的东西let styleString = newOffset + "px"。JavaScript 将为您完成字符串转换。

例子：

var block = document.getElementById("block");

var otherBlock = document.getElementById("otherBlock");

function testNoWork() {

    let styleString = '"' + String(block.offsetLeft+20) + 'px"'

    block.style.left = styleString;

}

function testWorks() {

    let styleString = (otherBlock.offsetLeft+20) + 'px'

    otherBlock.style.left = styleString;

}

setInterval(testWorks, 1000);

setInterval(testNoWork, 1000);

#block, #otherBlock {

    height: 1em;

    width: 1em;

    background-color: black;

    position: absolute;

    left: 0em;

    top: 0em;

}

Doesn't work:

<div id="block" style="left:50px;top:50px;"></div>

<br /><br /><br /><br /><br />Works:

<div id="otherBlock" style="left:50px;top:150px;"></div>