元素正在從另一個元素中獲取屬性值

Question

我編寫了一些代碼，其中兩個畫布位於屏幕的中心，並且我有一些函數可以在 window 加載和調整大小以使其始終居中時更改填充。 我將它們放在一個帶有 ID 的 div 中，這樣我就可以使用 .getElementById().setAttribute() 並在調整 window 的大小時更改左側和頂部填充。 在我嘗試將其他元素添加到頁面之前，這一切都很好。 我之后放置的任何內容也都應用了填充（但僅在頂部，我可以設置自己的 padding-left），即使它們在自己的 div 中具有自己的 id，所以我想知道是否有東西在我的 javascript 代碼正在改變這些元素。 這是我的 html 代碼：

<html>
<head><title>cyclops</title></head>
<body>
<div id="padding" style="">
    <div style="position:absolute;">
    <canvas id="myCanvas" width="400" height="400" style="z-index:2;position:absolute;"></canvas>
    <canvas id="layer2" width="400" height="400" style="z-index:3;position:absolute;"></canvas>
    </div>
</div>
<div id="separate"> 
<img src="putput2.png" height="100" width="100" style="padding-left:100;padding-top:100">
/* adding or removing the "padding-top" part doesnt change anything ^^^^^ */
</div>
<script src="cyclops.js"></script>
</body>
</html>

這是相關的 javascript：

//globals
    var canvasPadding = document.getElementById('padding')
    var currentHeight = 0; //innerwidth
    var currentWidth = 0; //innerheight
    var center_x = 0; //center x of the innerWidth
    var center_y = 0; //centery of the innerHeight
    var mousex = 0;
    var mousey = 0;
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext("2d");
    var c2 = document.getElementById('layer2');
    var ctx2 = c2.getContext("2d");
window.onload=function(load){
    currentHeight = window.innerHeight;
    currentWidth = window.innerWidth;
    var initialPadding = currentHeight / 2 - 200;
    var initialPadding2 = currentWidth / 2 - 200;
    canvasPadding.setAttribute("style","padding-top:" + initialPadding + ";padding-left:" + initialPadding2);
    center_x = window.innerWidth / 2;
    center_y = window.innerHeight / 2;
    draw_eye(ctx);
    draw_nose(ctx);
    draw_head(ctx);
}
window.addEventListener('resize', e=> {
    currentHeight = window.innerHeight;
    currentWidth = window.innerWidth;
    var newPadding = currentHeight / 2 - 200;
    var newPadding2 = currentWidth / 2 - 200;
    canvasPadding.setAttribute("style","padding-top:" + newPadding + ";padding-left:" + newPadding2);
    center_x = window.innerWidth / 2;
    center_y = window.innerHeight / 2;
})

Answer 1

在添加填充或邊距時，您需要添加 px 或其他單位

像這樣

canvasPadding.setAttribute("style","padding-top:" + newPadding + ";padding-left:" + newPadding2+"px");

//globals
    var canvasPadding = document.getElementById('padding')
    var currentHeight = 0; //innerwidth
    var currentWidth = 0; //innerheight
    var center_x = 0; //center x of the innerWidth
    var center_y = 0; //centery of the innerHeight
    var mousex = 0;
    var mousey = 0;
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext("2d");
    var c2 = document.getElementById('layer2');
    var ctx2 = c2.getContext("2d");
window.onload=function(load){
    currentHeight = window.innerHeight;
    currentWidth = window.innerWidth;
    var initialPadding = currentHeight / 2 - 200;
    var initialPadding2 = currentWidth / 2 - 200;
    canvasPadding.setAttribute("style","padding-top:" + initialPadding + ";padding-left:" + initialPadding2+"px");
    center_x = window.innerWidth / 2;
    center_y = window.innerHeight / 2;
    draw_eye(ctx);
    draw_nose(ctx);
    draw_head(ctx);
}
window.addEventListener('resize', e=> {
    currentHeight = window.innerHeight;
    currentWidth = window.innerWidth;
    var newPadding = currentHeight / 2 - 200;
    var newPadding2 = currentWidth / 2 - 200;
    canvasPadding.setAttribute("style","padding-top:" + newPadding + ";padding-left:" + newPadding2+"px");
    center_x = window.innerWidth / 2;
    center_y = window.innerHeight / 2;
})

元素正在從另一個元素中獲取屬性值

問題描述

1 個解決方案

解決方案1
0 2020-06-23 05:29:03

元素正在從另一個元素中獲取屬性值

問題描述

1 個解決方案

解決方案1 0 2020-06-23 05:29:03

解決方案1
0 2020-06-23 05:29:03