In this article, you’ll learn how to set the width and height of an element using JavaScript. You can use one of the following methods: Using the HTMLElement class’s style, width and height properties or width() and height() methods in JQuery.
Set the width and height of an element using JavaScript
Example of HTML:
<!DOCTYPE html>
<html>
<body>
<div>
Width:
<span>
<input type="range" min="10" max="300" value="50" id="w" onchange="change_width()">
</span>
<span id="w_display"></span>
</div>
<div>
Height:
<span>
<input type="range" min="10" max="300" value="50" id="h" onchange="change_height()">
</span>
<span id="h_display"></span>
</div>
<img id="img" src="https://media.timeout.com/images/105860804/320/210/image.jpg">
<div id="border" style="border: 1px solid red"></div>
</body>
</html>Understanding the method
When dealing with HTML documents in JavaScript (Or generally called HTML DOM), it is important to first get the specified element into a variable in which a HTMLElement class will be stored. The HTMLElement class represents an HTML element.
To get the element, you use either the document.getElementsByClassName() or document.getElementById() function.
However, you can also use JQuery to do the same thing with less complexity.
JQuery is a JavaScript library that simplifies many JavaScript features like document traversal, animations, event listening and handling, and attribute manipulation. If you can, learn and use JQuery.
To get an element, you use $(id/class/tag) (A selector) in which an id starts with "#" and class starts with ".".
Remember that you need to set up the library before you write the code. Either download it here, or copy the line below into the <head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
We will discuss the solutions in JavaScript and JQuery separately.
How to do it in JavaScript and JQuery
Every HTMLElement class contains the style property, representing any HTML element’s style attribute. With this, we can set its width and height. Please note that both values require CSS unit (i.e: px, em,…).
Additionally, note that the width and height properties are different from the style.width and style.height properties, as the latter ones are properties of the style property, and the previous ones represents the attributes. However, the width and height properties apply to elements such as <canvas> and <img>.
Example:
const IMG = document.getElementById("img");
const BORDER = document.getElementById("border");
const W_DISPLAY = document.getElementById("w_display");
const H_DISPLAY = document.getElementById("h_display");
function change_width() {
const w = document.getElementById("w").value;
IMG.width = w;
BORDER.style.width = `${w}px`;
W_DISPLAY.innerHTML = w;
}
function change_height() {
const h = document.getElementById("h").value;
IMG.height = h;
BORDER.style.height = `${h}px`;
H_DISPLAY.innerHTML = h;
}
change_width();
change_height();If you’re using JQuery, instead of setting its properties, you can simply use width(value) and height(value) functions.
Here’s the same thing in JQuery:
Example:
const IMG = $("#img");
const BORDER = $("#border");
const W_DISPLAY = $("#w_display");
const H_DISPLAY = $("#h_display");
function change_width() {
const w = $("#w").val();
IMG.width(w);
BORDER.width(w);
W_DISPLAY.innerHTML = w;
}
function change_height() {
const h = $("#h").val();
IMG.height(h);
BORDER.height(h);
H_DISPLAY.innerHTML = h;
}
change_width();
change_height();Summary
To set the width and height of an element using JavaScript, you first need to get the element and store it in a variable, then set its style.width and style.height properties (Or the width and height properties if it’s an <image> or <canvas> element). Or use the width() and height() functions if you’re using JQuery. You can also learn how to set an element’s text here.
Maybe you are interested:
- Clear the Content of a Div element using JavaScript
- Set the “required” Attribute using JavaScript
- Get Elements by multiple Class Names in JavaScript
Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.
Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP
