How to Access the Window.screenLeft Property in JavaScript?
To create dynamic and pixel-perfect web page designs, measurements of the window size are very critical to understand and use. The desired web page layout may not be generated if the measurement of the window is not taken or used correctly. Unfortunately, HTML/CSS did not provide any attribute or property to get accurate knowledge about the Window screen size and the distance of the window from the original screen boundaries.
Luckily! JavaScript resolves this issue by providing its “window.screenLeft” and “window.screenTop” properties to measure the position of the window on both the “x” and “y-axis” respectively. Our main focus in this article is to get a position along the X-axis with the help of the “window.screenLeft” property. So, let’s start!
This blog will explain the procedure to use or access the window.screenLeft property in JavaScript.
How to Access the “window.screenLeft” Property in JavaScript?
The “window.screenLeft” property of JavaScript returns the information related to the horizontal position of a window, relative to the screen. This property returns the numeric value in pixel format, showing the horizontal distance of the window from the screen. Visit the below code, in which the “window.screenLeft” property is being utilized:
Description of the above code:
- First, the HTML “p” element is created with an id of “target”.
- Next, the “window.screenLeft” property is used inside the “<script>” tag and stores the result in the variable “i”.
- Then, select the element with an id of “target’ and insert the value of the “i” variable using the “innerHTML” property.
The preview of the webpage is as follows:
The output shows the horizontal distance from the left screen boundary is zero pixels.
Example: Dynamically Retrieving the Horizontal Value
The screenLeft property can be used along with the “resize” event listener to provide the real-time position of the window corresponding to the screen along the x-axis. In the same manner, the position along the y-axis or vertical axis can also be retrieved by utilizing the “window.screenTop” property. Let’s have a code for the given scenario:
<h1 style="color: seagreen;"> Linuxhint </h1>
<p id="test"></p>
<script>
function dynamic() {
let i = window.screenLeft;
let j = window.screenTop;
document.getElementById("test").innerHTML = "Position from Left Direction: " + i + ", From Top Direction: " + j;
}
window.addEventListener('resize', dynamic);
</script>
The explanation of the above code is as follows:
- First, the targeted element has been created having an id of “test”.
- Next, the “<script>” tag is used, and the “dynamic()” function is created in it.
- Inside the function, utilize the “window.screenLeft” and “window.screenTop” properties and store them in “i” and “j” variables respectively.
- After that, select the targeted element by getting its id “test” and with the help of the “innerHTML” property display the values for both “i” and “j” variables over the webpage.
- In the end, attach the “resize” event listener with the “window” that invokes the “dynamic()” function each time when the window size gets changed.
Preview of the webpage after the end of compilation:
In the above output, the window difference from the top and left sides is received in pixels as the window gets resized.
That is all about the “window.screeLeft” property in JavaScript.
Conclusion
To access the “window.screenLeft” property in JavaScript and attach the “resize” event listener to “window”. This invokes the callback function every time the size of the window gets resized. Inside this function, create a variable that stores the “window.screenLeft” property. Moreover, retrieve the reference of the targeted element and display this variable’s values over it. This blog has explained the process to access the window.screenLeft property in JavaScript.
Source: linuxhint.com