[英]element is taking attribute values from another element
我编写了一些代码,其中两个画布位于屏幕的中心,并且我有一些函数可以在 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;
})
在添加填充或边距时,您需要添加 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;
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.