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() {&nbsp; &nbsp; let styleString = '"' + String(block.offsetLeft+20) + 'px"'&nbsp; &nbsp; block.style.left = styleString;}function testWorks() {&nbsp; &nbsp; let styleString = (otherBlock.offsetLeft+20) + 'px'&nbsp; &nbsp; otherBlock.style.left = styleString;}setInterval(testWorks, 1000);setInterval(testNoWork, 1000);#block, #otherBlock {&nbsp; &nbsp; height: 1em;&nbsp; &nbsp; width: 1em;&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0em;&nbsp; &nbsp; 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>