- By using the style.height and style.width properties
- By using the offsetHeight and offsetWidth properties
- By using the clientHeight and clientWidth properties
Let’s explore each…
#1 – By using the style.height and style.width properties
document.getElementById('myElement').style.height = '100px'; document.getElementById('myElement').style.width = '100px';
How it works
- Firstly, document.getElementById(‘myElement’) is a method that finds the HTML element with the ID ‘myElement’. This ID should be unique per HTML document.
- After the element is selected, .style.height = ‘100px’ sets the height of the element to 100 pixels. Similarly, .style.width = ‘100px’ sets the width of the element to 100 pixels.
- The height and width are set in pixels, but you can use any CSS length units, such as percentages or ems.
- The changes take effect immediately and will be visible on the webpage. If you want the changes to be temporary, you would have to remove or change these styles later in the code.
#2 – By using the offsetHeight and offsetWidth properties
var element = document.getElementById('myElement'); var otherElement = document.getElementById('otherElement'); otherElement.style.height = element.offsetHeight + 'px'; otherElement.style.width = element.offsetWidth + 'px';
How it works
This script fetches the height and width of an element and assigns these values to another element, thereby setting its size dynamically based on the first element.
- First, the script retrieves the element with ID ‘myElement’ and stores it in the variable ‘element’.
- Second, it does the same thing with the element ‘otherElement’.
- Third, it sets the height of ‘otherElement’ equal to the offsetHeight of ‘element’. The ‘offsetHeight’ property provides the height of an element in pixels, including the padding, border, and scrollbar (if rendered).
- Lastly, it sets the width of ‘otherElement’ equal to the offsetWidth of ‘element’. The ‘offsetWidth’ property provides the width of an element in pixels, including the padding, border, and scrollbar (if rendered).
#3 – By using the clientHeight and clientWidth properties
var divElement = document.getElementById('myDiv'); console.log('Height: ' + divElement.clientHeight, 'Width: ' + divElement.clientWidth); divElement.style.height = '200px'; divElement.style.width = '200px';
How it works
The above code first selects an HTML div element using its id, then logs the current height and width of the selected element, and finally sets the height and width of the div element to 200px each.
- We use the console.log() function to output the current height and width of the div element, by accessing the clientHeight and clientWidth properties of the divElement variable.
- Finally, we change the size of the div element by setting the style.height and style.width properties of divElement to ‘200px’ each.
Remember, while setting sizes, always keep user comfort in mind. With these tips, you are now equipped to create a more dynamic and interactive web experience. Happy coding!