HTML | DOM MouseEvent offsetX 属性

MouseEvent offsetX属性是一个只读属性，用于返回鼠标指针相对于目标元素的 x 坐标。

句法 ：

event.offsetX

返回值：它返回一个数字，表示鼠标指针的水平坐标，以像素为单位。

下面的程序说明了 MouseEvent offsetX 属性：

示例：找出鼠标指针相对于

元素的水平坐标。

  

    MouseEvent offsetX Property in HTML
    
        div {
            border: 3px solid green;
            height: 100px;
            width: 500px;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    MouseEvent offsetX Property
  
    Click inside the green box to get 
      the x-coordinate relative to the top edge.
  
    
  
    The x-coordinate, relative to 
      the top edge of the DIV element is: 
      
  
    
        
        function coord(event) {
            
            var c = event.offsetX;
            document.getElementById(
              "test").innerHTML = c;
        }
    
  

  

输出：

• 点击按钮后：
  
• 点击按钮后：
  

支持的浏览器：

• 歌剧
• IE浏览器
• 谷歌浏览器
• 火狐
• 苹果Safari