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

Question

I wrote some code that has two canvases positioned in the center of the screen, and I have functions that change the padding when the window loads and when it is resized so it can always be centered.我编写了一些代码，其中两个画布位于屏幕的中心，并且我有一些函数可以在 window 加载和调整大小以使其始终居中时更改填充。 I put them in a div with an ID so i could use.getElementById().setAttribute() and change the left and top padding when the window is resized.我将它们放在一个带有 ID 的 div 中，这样我就可以使用 .getElementById().setAttribute() 并在调整 window 的大小时更改左侧和顶部填充。 This all works fine until i try to add other elements to the page.在我尝试将其他元素添加到页面之前，这一切都很好。 Anything I put afterwards also has the padding applied to it (but only on the top, i can set my own padding-left) even if they are in their own div with their own id, so I'm wondering if there is something in my javascript code that is altering these elements.我之后放置的任何内容也都应用了填充（但仅在顶部，我可以设置自己的 padding-left），即使它们在自己的 div 中具有自己的 id，所以我想知道是否有东西在我的 javascript 代码正在改变这些元素。 Here is my html code:这是我的 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>

and here is the javascript that is relevant:这是相关的 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

You need to add px or some other unit while you adding padding or margin在添加填充或边距时，您需要添加 px 或其他单位

Like this像这样

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