我有一個基本的 html 頁面，其中包含三個具有唯一 ID 的畫布元素。我已經使用 javascript 的 document.querySelectAll('canvas') 將元素收集到一個陣列中。如果我在陣列上使用 for each 執行一個函式，我可以看到所有資訊，但是如果我嘗試提取該資訊以便拆分它并獲取 id 值，它就不起作用。我嘗試了幾件事，但似乎沒有任何效果。我是否正在嘗試做一些無法做到的事情？
！重要的！：這必須在 vanilla javascript 中完成，不允許任何形式的第三方庫。出于安全原因，我只能這么說。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title> Canvas Graph </title>
</head>
<body>
<!-- the id here will be used to set the height of the canvas to be created -->
<div>
<canvas id="canvas1"></canvas>
</div>
<div>
<canvas id="canvas2"></canvas>
</div>
<div>
<canvas id="canvas3"></canvas>
</div>
</body>
</html>
<script>
document.onload = getCanvasId();
function getCanvasId() {
const elementList = document.querySelectorAll('canvas');
const elementArray = [...elementList];
var temp = [];
var stringArray = [];
elementArray.forEach(element => {
temp.push(element);
console.log(element);
});
for(i=0; i<temp.length; i ){
stringArray[i] = temp[i].toString();
console.log(stringArray);
}
temp.forEach(element => {
var t = element.toString().split("#");
console.log(t);
});
}
</script>uj5u.com熱心網友回復：
我建議將 html 列印到控制臺，console.dir()以檢查可用于特定元素的 HTML DOM 屬性。
您將使用其id屬性訪問元素的 id - Element.id。
const elementList = document.querySelectorAll('canvas');
var stringArray = [];
elementList.forEach(element => {
stringArray.push(element.id);
});
console.log(stringArray);<div>
<canvas id="canvas1"></canvas>
</div>
<div>
<canvas id="canvas2"></canvas>
</div>
<div>
<canvas id="canvas3"></canvas>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454010.html
標籤：javascript html