Menu
NOTE: I have no problem using setAttribute in my project. This is merely a question as to why something is not working.
I have made a basic .js, .html and .css file. Here is the code for each:
//Load Document
window.onload = () => {
//get Body Height and Width
let body = document.body;
let html = document.documentElement;
let bH = Math.max(body.offsetHeight, body.scrollHeight, body.clientHeight, html.offsetHeight, html.scrollHeight, html.clientHeight);
let bW = Math.max(body.offsetWidth, body.scrollWidth, body.clientWidth, html.offsetWidth, html.scrollWidth, html.clientWidth);
console.log(`Body Height: ${bH}px`);
//get document elements
const menu = document.getElementById("getMenu");
const menuMarginTB = (bH - menu.offsetHeight) / 2;
//menu.setAttribute("style", "margin:"+menuMarginTB+"px auto;");
menu.style.margin = `${menuMarginTB}px auto;`;
};* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: absolute;
top: 0;
left: 0;
background-color: black;
height: 100%;
width: 100%;
}
.menu {
height: 400px;
width: 600px;
border: 1px solid white;
}<!DOCTYPE html>
<html>
<head>
<title>Random Website</title>
<link href="./main.css" type="text/css" rel="stylesheet" />
<script defer src="./main.js" type="text/javascript"></script>
</head>
<body>
<div id="getContainer" class="container">
<div id="getMenu" class="menu">
</div>
</div>
</body>
</html>I have commented out setAttribute because it works, but when I try to use .style.margin it doesn't work. There are no errors that pop up in Console (I'm using Google Chrome). I don't know why it's not working. Here is what I tried:
document.onload and document.addEventListener("DOMContentLoaded", ...); but these failed. I am currently using window.onload, and it doesn't work either.defer from the script tag; however, defer is only suppose to run this script after every HTML element was parsed (to my knowledge), I don't know how removing or keeping it in will have an affect on .style.margin, if any.id name from "menu" to "getMenu". I assumed that having the same name for both id and class was not only bad practice, but affecting the way .style.margin worked. However, it didn't really seem to help when I chaned it.concatenating the string instead of interpolating it. I assumed that maybe template interpolation didn't work in the was I was using it, but string concatenation didn't seem to help.[NOTE: I may have tried more things, but I can't remember.]
I think this problem extends to all .style properties because upon looking at the Dev Tool for Google Chrome, all of the properties are blank, even though they are assigned in the .css file.
Proof 1
I already assigned height to 400px but here it shows up as "". The same thing happens after I run the last line of the .js file is run using a breakpoint. When I hover over menu.style.margin, it, too, results in "". Proof 2
The only thing I can think of is that maybe something didn't load in causing this to happen, but even it it didn't load in, I don't know how to fix it. Any help on the matter is much appreciate.
635
This is actually a very simple error :)
element.style = value only works if value is a valid value for this css property. In the code you posted it is not: you may not include the semicolon in the string.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
