Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to set the width and height of elements in javascript". In daily operation, I believe many people have doubts about how to set the width and height of elements in javascript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to set the width and height of elements in javascript". Next, please follow the editor to study!

Javascript sets the width and height of the element: 1, get the width and height of the html element; 2, set the width and height of the element through "main.style.width" and "main.style.height".

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer

How does javascript set the width and height of an element?

JS gets the width and height of html elements and sets the width and height

Get the width and height of the browser:

Var width = window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth;var height = window.innerHeight | | document.documentElement.clientHeight | | document.body.clientHeight

Two ways to get the width and height of html elements

/ / first, take the element var main = document.getElementById ('main'); / / the first way is var mainWidth = main.offsetWidth,mainHeight = main.offsetHeight;//, the second way is var mainWidth3 = main.style.width,mainHeight2 = main.style.height

The difference between the two methods is that the first method can get the width and height in any case, while the second way can only get the width and height defined in html, but not the width and height defined by css.

Set width and height

Main.style.width = "120px"; main.style.height = "130px"

There is and only this method, the following method is not feasible, Firefox test.

Main.style.offsetWidth = "120px"; main.style.offsetHeight = "130px"; at this point, the study of "how javascript sets the width and height of elements" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.