Pure javascript equivalent to jquery assignment

Question

I've been trying to figure out the proper syntax for the pure JavaScript version of this JQuery code.

$('body').css('margin-bottom', $('footer').height());

So far what I have is:

var body = document.getElementById('#body');
var footer = document.getElementById('#footer');

body.style.marginBottom = footer.style.height;

This assignment only works if I define the footer height in JavaScript.

I'm aware of this question How to make a pure javascript .css() function using variable variables [duplicate] and the questions similar to it, but still am unable to get it correct. I know I could just use JQuery, but I don't see the value in loading a whole library to do very simple things.

Thank you in advance.

Have you tried footer.offsetHeight? https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight — AtheistP3ace, Dec 14 '15 at 18:18
Have you tried removing the hash in front of the id? getElementById('body') — Luca Giorgi, Dec 14 '15 at 18:18
Or changing `document.getElementById('#body')` to `document.querySelector('#body')` — We Stan Test Coverage, Dec 14 '15 at 18:20
@battery.cord `#body` will not work, as the id of the body is not 'body'. — Swiffy, Dec 14 '15 at 18:22
Are you executing these lines on `document.onload= function(){...}`? Maybe your footer have no height because page isn't loaded yet. — Lucas Souza, Dec 14 '15 at 18:25
@Piwwoli Are you sure? The original users code sure seems to be trying to get the body element by id of body only he switched code from jQuery to pure JS and never removed the #. — AtheistP3ace, Dec 14 '15 at 18:26
@battery.cord I actually gave the body element a body id tag just to make sure. — Xavier, Dec 14 '15 at 18:56

score 1 · Answer 1 · answered Dec 14 '15 at 18:19

Open JavaScript console and type console.log(document.body.style) to see all style attributes that document.body has. Also I think it's document.body and not just body.

Body seems to have the following margin properties:

margin: ""
marginBottom: ""
marginLeft: ""
marginRight: ""
marginTop: ""

So document.body.style.marginBottom = '15px' should work for example. Remember that you must specify the unit, like px.

score 0 · Answer 2 · answered Dec 14 '15 at 18:22

0

Use offsetHeight:

body.style.marginBottom = footer.offsetHeight;

answered Dec 14 '15 at 18:22

hillai

93
7

Pure javascript equivalent to jquery assignment

2 Answers2