The above program display the width and height of the window at runtime. Note: Resizing the window is important to see the working
Var h = ĭocument.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h The above resizing functions can also be used with addEventListener(). As mentioned earlier you will have to set the prior to running this program. Below will be the output of the above code. After this, we are using the onresize function where we are calling the letsresize function. We have used one of these functions in order to set the size of the text as per the window being resized. These functions can help us in setting the height and width of window, client or the server. The function letsresize() is making use of different functions. We make use of querySelector which helps us to store the height and width. In this program we have used two variables for accepting the height and width of the window. WidthOutput.textContent = window.innerWidth HeightOutput.textContent = window.innerHeight Since the code will be running on an there will be needed a setup that can help in actually seeing the resizing effect.Ĭhanging thesize of the browser window to check the working of onresize event.Ĭonst heightOutput = document.querySelector('#height') Ĭonst widthOutput = document.querySelector('#width') Let us see an example of resizing windows with using an.
Given below are the examples of JavaScript onresize: Example #1 Below is the output after resizing the page. To check it you can just minimize your browser window, the Event will be captured and the count will increase. But when the window is resized then the counter will increase. When the first time program is run, then above output will be displayed. In addition to this we have some more functions for resizing. It signifies that this function is calling onresize whenever the window is being resized. Here, in this function whenever the window is resized the count is incremented. As mentioned above the onresize function takes the user defined function as a parameter and then performs its function. We have then declared a variable x which will keep a count of the resizing. This function is calling the myResizeFunction(). The script that follows contains the onresize function. Here in the body we are printing the count of how many times the window is resized. This example helps in resizing an existing window and also keeps a count of it.ĭocument.getElementsByTagName("BODY").onresize = function() ĭocument.getElementById("demo").innerHTML = txt The working of the onresize function is very easy. We use the above syntax for listening to the events. We will also need the addEventListener() method which can be used as below: object.addEventListener("resize", m圜ode)
0 kommentar(er)
