代码中未设置JavaScript画布样式

我试图动态调整画布的

左侧

位置。宽度和高度可以更改，我知道

左

需要一些快速网络搜索的CSS。下面是我得到的：

HTML:

CSS:

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

值，对于使用该变量的另一个特性来说，它工作得很好。然而，检查日志时，这个

样式.left

似乎没有任何作用（下面的控制台日志）：

从视觉上看，什么也没有发生。在上面的日志中，它应该打印style.left的变量值，但是当我尝试检查它时，它是空白的

如何解决这个问题，并使用JS动态地将画布位置向左移动？

用引号“填充”样式字符串无助于将其注册为字符串。相反，它只是在字符串的末尾添加引号。这将创建一个内容为

“510px”

的字符串，而不是像预期的那样使用

510px

创建字符串，这对于CSS来说是无效的输入，因此Javascript只是忽略它而不做任何事情

相反，您应该编写类似于

let styleString=newOffset+“px”

的代码。Javascript将为您进行字符串转换

例如：

var block=document.getElementById（“block”）；
var otherBlock=document.getElementById（“otherBlock”）；
函数testNoWork（）{
让styleString='“'+字符串（block.offsetLeft+20）+'px”'
block.style.left=样式字符串；
}
函数testWorks（）{
让styleString=（otherBlock.offsetLeft+20）+'px'
otherBlock.style.left=样式字符串；
}
设置间隔（测试工作，1000）；
设置间隔（testNoWork，1000）
#块，#其他块{
高度：1米；
宽度：1米；
背景色：黑色；
位置：绝对位置；
左：0em；
顶部：0em；
}
不起作用：







rightVideoOffset在哪里定义？代码中没有显示它，如果没有问题，您是否可以给出它的值？
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);

canvas2.style.left:  // "420px"