I'm trying to get this elements margin-top and change it simply

Multi tool use
So I want to get .SideArrow's margin top using js (since it's responsive and using calc()), and add a small pixel value to it with the menu, but only if .SideArrow has "display: inline-block". It is normally "display: inline", but changes with a media query.
I've got the "If it's display: inline" part down I think (haven't applied it to the function yet). The problem is getting the margin-top
I've tried what you can see in the code, and simply adding
var margin = document.getElementsByClassName("SideArrow").style.marginTop;
The problem I'm getting is it always responding with:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at (index):80
index:80 being
var style = window.getComputedStyle(arrows);
code:
var objName = "SideArrow";
//Function to toggle menu
var nav = document.getElementById("MobileNav");
var menubtn = document.getElementById("MobileMenu");
*
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
console.log(margin); //Both output
console.log(arrows);
*
alert(margin); //Doesn't alert anything
var mvalue = arrows.rules.marginTop;
var tvalue = 197;
var zvalue = mvalue + tvalue;
console.log(mvalue);
*
function MenuToggle() {
if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "menu"; //Using Material icons for now
arrows.style.marginTop = "mvalue" + "px";
}
else if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "0px") {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "zvalue" + "px";
}
else if (arrows.some(x => x.style.display != objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
else {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
*
As shown in the code I want toe margin-top to add 197 pixels to it with the height of 'nav' when the function is ran (only when display is inline-block), but I can't even fetch the current margin-top correctly.
Update:
Updated the function itself, aka what's within the *.
And also the margin and arrow vars as @JackBashord showed me
It's probably far easier to see the whole file!
Here's the repo, I'm working under the Mobile-menu branch
https://github.com/SanderGodard/Home
EDIT:
I managed to work around it, and figured some other stuff out, so sorry to other people out there with the same problem.
I gave each arrow its own id and messed around with margin-top
with position: absolute
.
Good luck
javascript html css
add a comment |
So I want to get .SideArrow's margin top using js (since it's responsive and using calc()), and add a small pixel value to it with the menu, but only if .SideArrow has "display: inline-block". It is normally "display: inline", but changes with a media query.
I've got the "If it's display: inline" part down I think (haven't applied it to the function yet). The problem is getting the margin-top
I've tried what you can see in the code, and simply adding
var margin = document.getElementsByClassName("SideArrow").style.marginTop;
The problem I'm getting is it always responding with:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at (index):80
index:80 being
var style = window.getComputedStyle(arrows);
code:
var objName = "SideArrow";
//Function to toggle menu
var nav = document.getElementById("MobileNav");
var menubtn = document.getElementById("MobileMenu");
*
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
console.log(margin); //Both output
console.log(arrows);
*
alert(margin); //Doesn't alert anything
var mvalue = arrows.rules.marginTop;
var tvalue = 197;
var zvalue = mvalue + tvalue;
console.log(mvalue);
*
function MenuToggle() {
if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "menu"; //Using Material icons for now
arrows.style.marginTop = "mvalue" + "px";
}
else if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "0px") {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "zvalue" + "px";
}
else if (arrows.some(x => x.style.display != objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
else {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
*
As shown in the code I want toe margin-top to add 197 pixels to it with the height of 'nav' when the function is ran (only when display is inline-block), but I can't even fetch the current margin-top correctly.
Update:
Updated the function itself, aka what's within the *.
And also the margin and arrow vars as @JackBashord showed me
It's probably far easier to see the whole file!
Here's the repo, I'm working under the Mobile-menu branch
https://github.com/SanderGodard/Home
EDIT:
I managed to work around it, and figured some other stuff out, so sorry to other people out there with the same problem.
I gave each arrow its own id and messed around with margin-top
with position: absolute
.
Good luck
javascript html css
add a comment |
So I want to get .SideArrow's margin top using js (since it's responsive and using calc()), and add a small pixel value to it with the menu, but only if .SideArrow has "display: inline-block". It is normally "display: inline", but changes with a media query.
I've got the "If it's display: inline" part down I think (haven't applied it to the function yet). The problem is getting the margin-top
I've tried what you can see in the code, and simply adding
var margin = document.getElementsByClassName("SideArrow").style.marginTop;
The problem I'm getting is it always responding with:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at (index):80
index:80 being
var style = window.getComputedStyle(arrows);
code:
var objName = "SideArrow";
//Function to toggle menu
var nav = document.getElementById("MobileNav");
var menubtn = document.getElementById("MobileMenu");
*
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
console.log(margin); //Both output
console.log(arrows);
*
alert(margin); //Doesn't alert anything
var mvalue = arrows.rules.marginTop;
var tvalue = 197;
var zvalue = mvalue + tvalue;
console.log(mvalue);
*
function MenuToggle() {
if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "menu"; //Using Material icons for now
arrows.style.marginTop = "mvalue" + "px";
}
else if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "0px") {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "zvalue" + "px";
}
else if (arrows.some(x => x.style.display != objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
else {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
*
As shown in the code I want toe margin-top to add 197 pixels to it with the height of 'nav' when the function is ran (only when display is inline-block), but I can't even fetch the current margin-top correctly.
Update:
Updated the function itself, aka what's within the *.
And also the margin and arrow vars as @JackBashord showed me
It's probably far easier to see the whole file!
Here's the repo, I'm working under the Mobile-menu branch
https://github.com/SanderGodard/Home
EDIT:
I managed to work around it, and figured some other stuff out, so sorry to other people out there with the same problem.
I gave each arrow its own id and messed around with margin-top
with position: absolute
.
Good luck
javascript html css
So I want to get .SideArrow's margin top using js (since it's responsive and using calc()), and add a small pixel value to it with the menu, but only if .SideArrow has "display: inline-block". It is normally "display: inline", but changes with a media query.
I've got the "If it's display: inline" part down I think (haven't applied it to the function yet). The problem is getting the margin-top
I've tried what you can see in the code, and simply adding
var margin = document.getElementsByClassName("SideArrow").style.marginTop;
The problem I'm getting is it always responding with:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at (index):80
index:80 being
var style = window.getComputedStyle(arrows);
code:
var objName = "SideArrow";
//Function to toggle menu
var nav = document.getElementById("MobileNav");
var menubtn = document.getElementById("MobileMenu");
*
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
console.log(margin); //Both output
console.log(arrows);
*
alert(margin); //Doesn't alert anything
var mvalue = arrows.rules.marginTop;
var tvalue = 197;
var zvalue = mvalue + tvalue;
console.log(mvalue);
*
function MenuToggle() {
if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "menu"; //Using Material icons for now
arrows.style.marginTop = "mvalue" + "px";
}
else if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "0px") {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "zvalue" + "px";
}
else if (arrows.some(x => x.style.display != objProperty) && nav.style.height === "197px") {
nav.style.height = "0px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
else {
nav.style.height = "197px";
menubtn.innerHTML = "clear";
arrows.style.marginTop = "mvalue" + "px";
}
*
As shown in the code I want toe margin-top to add 197 pixels to it with the height of 'nav' when the function is ran (only when display is inline-block), but I can't even fetch the current margin-top correctly.
Update:
Updated the function itself, aka what's within the *.
And also the margin and arrow vars as @JackBashord showed me
It's probably far easier to see the whole file!
Here's the repo, I'm working under the Mobile-menu branch
https://github.com/SanderGodard/Home
EDIT:
I managed to work around it, and figured some other stuff out, so sorry to other people out there with the same problem.
I gave each arrow its own id and messed around with margin-top
with position: absolute
.
Good luck
javascript html css
javascript html css
edited Dec 30 '18 at 12:08
Sander Godard
asked Dec 28 '18 at 21:28


Sander GodardSander Godard
42
42
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The problem is that when you call getElementsByClassName
, you're getting a NodeList, which is a type of array, rather than a single element. You can fix this by using querySelector
instead:
var arrows = document.querySelector("." + objName);
And you can get the margin-top
value without using getComputedStyle
- just do this:
var margin = arrows.style.marginTop;
And then execute your function like so:
if (arrows.style.display == "inline") {
MenuToggle();
}
Note: The above would only work if there was only one .SideArrow
element. Here's how you'd do it for multiple elements:
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
MenuToggle();
}
Note: The above would make margin
and arrows
arrays.
Keep in mind thatdocument.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns aNodeList
and reference it by index or some other identifying, specific trait.
– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964462%2fim-trying-to-get-this-elements-margin-top-and-change-it-simply%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem is that when you call getElementsByClassName
, you're getting a NodeList, which is a type of array, rather than a single element. You can fix this by using querySelector
instead:
var arrows = document.querySelector("." + objName);
And you can get the margin-top
value without using getComputedStyle
- just do this:
var margin = arrows.style.marginTop;
And then execute your function like so:
if (arrows.style.display == "inline") {
MenuToggle();
}
Note: The above would only work if there was only one .SideArrow
element. Here's how you'd do it for multiple elements:
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
MenuToggle();
}
Note: The above would make margin
and arrows
arrays.
Keep in mind thatdocument.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns aNodeList
and reference it by index or some other identifying, specific trait.
– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
|
show 2 more comments
The problem is that when you call getElementsByClassName
, you're getting a NodeList, which is a type of array, rather than a single element. You can fix this by using querySelector
instead:
var arrows = document.querySelector("." + objName);
And you can get the margin-top
value without using getComputedStyle
- just do this:
var margin = arrows.style.marginTop;
And then execute your function like so:
if (arrows.style.display == "inline") {
MenuToggle();
}
Note: The above would only work if there was only one .SideArrow
element. Here's how you'd do it for multiple elements:
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
MenuToggle();
}
Note: The above would make margin
and arrows
arrays.
Keep in mind thatdocument.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns aNodeList
and reference it by index or some other identifying, specific trait.
– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
|
show 2 more comments
The problem is that when you call getElementsByClassName
, you're getting a NodeList, which is a type of array, rather than a single element. You can fix this by using querySelector
instead:
var arrows = document.querySelector("." + objName);
And you can get the margin-top
value without using getComputedStyle
- just do this:
var margin = arrows.style.marginTop;
And then execute your function like so:
if (arrows.style.display == "inline") {
MenuToggle();
}
Note: The above would only work if there was only one .SideArrow
element. Here's how you'd do it for multiple elements:
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
MenuToggle();
}
Note: The above would make margin
and arrows
arrays.
The problem is that when you call getElementsByClassName
, you're getting a NodeList, which is a type of array, rather than a single element. You can fix this by using querySelector
instead:
var arrows = document.querySelector("." + objName);
And you can get the margin-top
value without using getComputedStyle
- just do this:
var margin = arrows.style.marginTop;
And then execute your function like so:
if (arrows.style.display == "inline") {
MenuToggle();
}
Note: The above would only work if there was only one .SideArrow
element. Here's how you'd do it for multiple elements:
var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
MenuToggle();
}
Note: The above would make margin
and arrows
arrays.
edited Dec 28 '18 at 22:18
answered Dec 28 '18 at 21:35
Jack BashfordJack Bashford
6,22931235
6,22931235
Keep in mind thatdocument.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns aNodeList
and reference it by index or some other identifying, specific trait.
– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
|
show 2 more comments
Keep in mind thatdocument.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns aNodeList
and reference it by index or some other identifying, specific trait.
– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
Keep in mind that
document.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns a NodeList
and reference it by index or some other identifying, specific trait.– Marcus Parsons
Dec 28 '18 at 21:40
Keep in mind that
document.querySelector
will only select the very first node. To get any other nodes, you'll have to reference them using one of the selectors that returns a NodeList
and reference it by index or some other identifying, specific trait.– Marcus Parsons
Dec 28 '18 at 21:40
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
But the OP did not specify whether he had a single item with that class name, or multiple elements. @SanderGodard, could you please specify?
– Jack Bashford
Dec 28 '18 at 21:41
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
That wasn't an argument, on my part, but an observation. Classes are typically assigned to multiple elements, so it's worthwhile to mention how this will work when applied to multiple elements.
– Marcus Parsons
Dec 28 '18 at 21:43
1
1
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
Good point @MarcusParsons I'll show that in my answer.
– Jack Bashford
Dec 28 '18 at 21:44
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
I didn't expect replied this quickly! Yes there are two elements with that class, so I'm going to try the second solution immediately. Lovely, thanks again!
– Sander Godard
Dec 29 '18 at 8:15
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964462%2fim-trying-to-get-this-elements-margin-top-and-change-it-simply%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
QDPAFVA