HTML Window screenX Property


The HTML Window screenX property returns the horizontal coordinates of the window relative to the screen. It is supported by all browsers.

Syntax

Following is the syntax −

window.screenX

Let us see an example of HTML Window screenX Property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>HTML Window screenX Property Demo</h1>
<button onclick="display()" class="btn">Show screenX value</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'The horizontal coordinate of the window relative to the screen is: ' + window.screenX + 'px';
   }
</script>
</body>
</html>

Output

Click on “Show screenX value” button to display the horizontal coordinate of the window relative to the screen:

Updated on: 01-Oct-2019

69 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements