元素正在从另一个元素中获取属性值答案

【问题标题】：element is taking attribute values from another element元素正在从另一个元素中获取属性值
【发布时间】：2020-10-13 01:36:05
【问题描述】：

我编写了一些代码，其中两个画布位于屏幕的中心，并且我有一些函数可以在窗口加载和调整大小时更改填充以使其始终居中。我将它们放在带有 ID 的 div 中，因此我可以使用 .getElementById().setAttribute() 并在调整窗口大小时更改左侧和顶部填充。在我尝试将其他元素添加到页面之前，这一切都很好。我之后放置的任何内容也都应用了填充（但仅在顶部，我可以设置我自己的 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;
})

【问题讨论】：

padding 在元素内部，也许你需要margin，它定义了元素之间的距离。
不幸的是，使用边距而不是填充不会改变任何东西
填充/边距需要一个单位，您已将纯数字设置为值。
这也不会改变任何东西。使用检查元素，我看到主体元素顶部有一个填充元素，因此主体是偏移的。我试图做的是在该填充中放入图像或文本；基本上我想让画布漂浮在中心，并且仍然能够在它周围放置东西。

标签： javascript html canvas padding

【解决方案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;
})

【讨论】：