Javascript this style height

Style height Property

The height property sets or returns the height of an element.

The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property.

Tip: Use the width property to set or return the width of an element.

Browser Support

Syntax

Return the height property:

Property Values

Value	Description
auto	The browser sets the height. This is default
length	Defines the height in length units
%	Defines the height in % of the parent element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

More Examples

Example

Change the height of a element:

Example

Change the height and width of an element:

document.getElementById(«myImg»).style.height = «300px»;
document.getElementById(«myImg»).style.width = «300px»;

Example

Return the height of an element:

Related Pages

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Источник

Javascript this style height

Last updated: Jan 11, 2023
Reading time · 3 min

# Set the Width and Height of an Element using JavaScript

Use the style.width and style.height properties to set the width and height of an element, e.g. box.style.width = ‘100px’ .

The width and height properties set the element’s width and height to the supplied values.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="box" style="background-color: salmon">Box 1div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; 

The style object allows us to set, read or update any CSS property on the element.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; console.log(box.style.width); // 👉️ "100px" console.log(box.style.height); // 👉️ "100px" 

# Setting width and height has no effect on inline elements

Note that setting the width and height on an inline element, such as a span has no effect.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> span id="box" style="background-color: salmon">Box 1span> script src="index.js"> script> body> html> 

And here is our attempt to update the element’s height and width.

Copied! 
const box = document.getElementById('box'); // ❌ Set width to 100px box.style.width = '100px'; // ❌ Set height to 100px box.style.height = '100px'; 

If you open your browser, you will see that the element’s width and height are determined by the content area.

# Setting the element’s display to inline-block

To solve this, we can set the element’s display property to inline-block .

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> span id="box" style="background-color: salmon; display: inline-block" >Box 1span > script src="index.js"> script> body> html> 

And now we can set the element’s width and height.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; 

Some examples use the setAttribute method to update the element’s height and width, however, the setAttribute method overrides the style property completely.

Copied! 
const box = document.getElementById('box'); box.setAttribute('style', 'width: 100px; height: 100px'); 

The setAttribute method takes 2 parameters:

1. The name of the attribute we want to set on the element.
2. The value that should be assigned to the attribute.

If the attribute already exists, the value is updated, otherwise, a new attribute is added with the specified name and value.

So if you use the setAttribute method approach, you are effectively replacing the element’s style attribute value.

This can be very confusing and difficult to debug, so it’s best to set any CSS properties using the style object on the element.

# Set the Width and Height on a Collection of Elements

If you need to set the width and height on a collection of elements, you have to:

1. Select the collection of elements.
2. Use the for. of method to iterate over the collection.
3. Set the width and height using the style.width and style.height property on each element.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div class="box" style="background-color: salmon">Box 1div> div class="box" style="background-color: salmon">Box 2div> div class="box" style="background-color: salmon">Box 3div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const boxes = document.querySelectorAll('.box'); for (const box of boxes)  box.style.width = '100px'; box.style.height = '100px'; > 

We used the document.querySelectorAll method to select all elements with a class of box .

We then used the for. of loop to iterate over the collection and set the width and height properties on each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Javascript Reference — HTML DOM Style height Property

The height property in CSS controls height for block-level elements or elements with absolute or fixed position.

The height property sets or gets the height of an element in Javascript.

Browser Support

height	Yes	Yes	Yes	Yes	Yes

Syntax

Return the height property:

object.style.height='auto|length|%|initial|inherit;

Property Values

Value	Description
auto	Default. Let browser set the height.
length	Set the height in length units
%	Set the height in percent of the container element
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Example

The following code shows how to set the element height.

 !DOCTYPE html> html> body> button type="button" >"myBtn" onclick="myFunction()">test script> function myFunction() !-- w w w .ja v a 2s .c om--> document.getElementById("myBtn").style.height = "50px"; >   

The code above is rendered as follows:

Example 2

The following code shows how to change the height of a element:

 !DOCTYPE html> html> head> style> #myDIV !-- w w w .j a va 2 s . co m--> width: 100px; height: 100px; background-color: coral; color: white; >  body> button onclick="myFunction()">test div >"myDIV">myDIV script> function myFunction() < document.getElementById("myDIV").style.height = "500px"; >   

The code above is rendered as follows:

Example 3

The following code shows how to change the height and width of an element.

 !DOCTYPE html> html> body> img >"myImg" src="http://java2s.com/style/demo/border.png" width="100" height="132"> br> button type="button" onclick="myFunction()">test script> function myFunction() !-- w w w .jav a 2 s . co m--> document.getElementById("myImg").style.height = "300px"; document.getElementById("myImg").style.width = "300px"; >   

The code above is rendered as follows:

Example 4

The following code shows how to get the height of an element:

 !DOCTYPE html> html> body> !-- ww w .jav a2s. c o m--> img >"myImg" src="http://java2s.com/style/demo/border.png" style="width:100px;height:132px;"> br> button type="button" onclick="myFunction()">test script> function myFunction() < console.log(document.getElementById("myImg").style.height); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник

How to Set the Width and Height of an Element using JavaScript

Even though it’s basic, new programmers often struggle to figure out the correct method to set the width and height of an element dynamically using plain JavaScript.

You can use the style property in JavaScript to set an element’s width, height, colour etc. You can use the same property to get or retrieve the elements CSS styles.

The style property returns a CSSStyleDeclaration object, which will have all the default or assigned attributes of an element. See the below image.

Remember (and its important) : The style property will only return inline style declarations of an element (when using element.style.get). Therefore, if you have defined styles to an element inside the &lthead> tag or in an external .css file, this property won’t return any value. I have explained it here.

Set width and height of Element using style property

Here’s an example that shows how you can dynamically set (or assign) width and height of an element using the style property.

<!DOCTYPE html> <html> <head> <title>Set Element width and height using JavaScript</title> </head> <body> <div style=' width: 150px; border: solid 1px red; padding: 5px; font: 15px Calibri;' onclick='changeWidth(this, "500px")'> Content inside a DIV </div> </body> <script> function changeWidth(ele, wd) < ele.style.width = wd; ele.style.height = '50px'; > </script> </html>

The &ltdiv> element in the above markup has a width (150px) defined inline. When I click the element, the script sets a new width and height.

Note that you have to set new width and height along with the unit value px or pixel, inside the single or double quotes .

Using style property to get inline style of an Element

The style property will only return inline style of an element. Inline CSS style applies to an element or when assigned using the style attribute like this.

<div style='border: solid 1px red; padding: 5px; font: 15px Calibri;'> <!--inline style declaration-->

This method will work fine.

<!DOCTYPE html> <html> <head> <title>Get Element width and height in JavaScript</title> </head> <body> <div style=' width: 200px; height: 50px; border: solid 1px red; padding: 5px; font: 15px Calibri;' onclick='getStyle(this)'> Content inside a DIV </div> </body> <script> function getStyle(ele) < alert('width:' + ele.style.width + ' height: ' + ele.style.height); > </script> </html>

However , if you have declared the width and height of an element inside the &lthead> tag in your page, the style property will return nothing . See this example,

<!DOCTYPE html> <html> <head> <style> div < width: 200px; height: 50px; ></style> </head> <body> <div style=' border: solid 1px red; padding: 5px; font: 15px Calibri;' onclick='getStyle(this)'> Content inside a DIV </div> </body> <script> function getStyle(ele) < alert('width:' + ele.style.width + ' height: ' + ele.style.height); // Will return nothing. > </script> </html>

Point of Interest

You may often be tempted to use the setAttribute() method to set an elements style attributes, such as the width. However, remember it will override all other style properties (inline or inside the &lthead> tag) of that element.

Therefore, if you only required setting a new width and height of an element, use the style property.

That’s it. Thanks for reading and happy coding. ☺

Источник