已解決430363個問題，去搜搜看，總會有你想問的

JavaScript 畫布樣式未在代碼中設置

首頁猿問 JavaScript...

JavaScript 畫布樣式未在代碼中設置

JavaScript

阿波羅的戰車 2023-09-14 18:19:33

我正在嘗試動態調整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 動態地將畫布位置向左移動？

查看完整描述

1 回答

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

用引號“填充” 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:

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

反對回復 2023-09-14

1 回答
0 關注
109 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JavaScript 畫布樣式未在代碼中設置

JavaScript 畫布樣式未在代碼中設置

1 回答

添加回答