How to find the width of a div using vanilla JavaScript?
document.getElementById("mydiv").offsetWidth
- element.offsetWidth (MDC)
Get DIV width and height in javascript
Since you're already using jQuery, you can just do:
var width;
if (need == 1) {
width = $("#web").width();
} else {
width = $("#set").width();
}
How to find the width of a form as a percentage of the client window in vanilla JS?
If you're looking for the percentage of the entire client window (as opposed to the percentage of the offsetParent()
as in the linked thread) you could use a similar technique, just divide by the document.body.clientWidth
instead of the offsetParent().width()
.
In vanilla Javascript:
var client = document.body.clientWidth;
var form = document.getElementById('form1').clientWidth;
alert(((form/client)*100)+'%');
Alternatively, if you're after the size of the client window as a percentage of the available screen resolution, you can add this to the above and note the second alert:
var screen = window.screen.availWidth;
alert(((client/screen)*100)+'%');
Pure js. Get width of element and use it in a scroll
document.getElementsByClassName('text-image-item')
returns a NodeList
, which in this case contains 4 nodes. The NodeList
does not have an offsetWidth
. Only individual elements have a width.
You will need to pick one of the nodes and use its width instead. You can do this by picking a valid index:
document.getElementsByClassName('text-image-item')[0].offsetWidth
For more information about NodeList
, check MDN
How do I watch the element size on load AND resize of the window with vanilla JS?
That's because you calculate the computedHeight
only once in the page load. Every time you the resize handler is firing, computedHeight
is the same value.
You need to re-calculate it in every resize. Something like this:
function resizeMain() {
let main = document.getElementById('main');
let fullscreen = window.innerHeight;
let headerHeight = document.getElementById('navHeader').offsetHeight;
let newsletterHeight = document.getElementById('newsletter').offsetHeight;
let footerHeight = document.getElementById('footer').offsetHeight;
let addHeight = headerHeight + newsletterHeight + footerHeight;
let computedHeight = fullscreen - addHeight + 7;
document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
}
calculateHeight();
window.addEventListener('load', resizeMain);
Although, I'm not sure it's a wise approach because for each resize you'll do some heavy calculation. You may want to use some kind of debounce
function.
Getting the width of child element pure javascript
Both getElementsByClassName
and getElementsByTagName
returns an array of objects, so you need to access the actual element by its index then call its methods/properties
window.onload = function () {
var project = document.getElementsByClassName('project-box')[0];
var img = project.getElementsByTagName('img')[0];
alert(img.clientWidth);
};
Demo: Fiddle
Related Topics
Switch Statement for Greater-Than/Less-Than
Jquery Checkbox Change and Click Event
JavaScript Function Declaration and Evaluation Order
What Benefits Does Es2015 (Es6) 'Class' Syntax Provide
How to Include a JavaScript Script File in Angular and Call a Function from That Script
Convert Column Index into Corresponding Column Letter
Split a String by Commas But Ignore Commas Within Double-Quotes Using JavaScript
Are Variable Operators Possible
Msie and Addeventlistener Problem in JavaScript
Why Can't I Add Properties to a String Object in JavaScript
How to Efficiently Randomly Select Array Item Without Repeats
Unexpected Token Colon JSON After Jquery.Ajax#Get
What Is the Correct Way to Check for String Equality in JavaScript
Controlling Fps with Requestanimationframe
How to Make Exe Files from a Node.Js App
Uploading Multiple Files to Google Drive with Google App Script