element is taking attribute values from another element
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. 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. 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. Here is my html code:
<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:
//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;
})
1 answers
solution1
0 2020-06-23 05:29:03
You need to add px or some other unit while you adding padding or margin
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;
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.