HTML | DOM 样式 objectPosition 属性

DOM Style objectPosition属性用于设置或返回图像或视频在其自己的内容框中的定位方式。

句法：

• 它返回 objectPosition 属性。

  object.style.objectPosition

• 它用于设置 objectPosition 属性。

  object.style.objectPosition = "position|initial|inherit"

属性值：

• 位置：这用于根据长度值或字符串（左、右和中心）指定图像或视频的位置。

  示例 1：

    
  
      
          DOM Style objectPosition Property
      
      
          .content {
              border: 1px solid;
              object-fit: cover;
              height: 250px;
              width: 500px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectPosition Property
      
      
        The objectPosition property 
        specify how an image or video 
        should be positioned in its content box.
      
      
      
      
          Change resize
      
    
      
      
          function setObjectPosition() {
              elem = document.querySelector('.content');
              elem.style.objectPosition = '75% 100%';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• 初始值：用于将此属性设置为其默认值。

  示例 2：

    
  
      
          DOM Style objectPosition Property
      
      
          .content {
              border: 1px solid;
              object-fit: cover;
              height: 250px;
              width: 500px;
              object-position: 50% 100%;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectPosition Property
      
      
          The objectPosition property specify 
        how an image or video should be
        positioned in its content box.
      
      
    
      
          Change resize
      
    
      
      
          function setObjectPosition() {
              elem = document.querySelector('.content');
              elem.style.objectPosition = 'initial';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

• 继承：这从其父级继承属性。

  示例 3：

    
  
      
          DOM Style objectPosition Property
      
      
          #parent {
              object-position: 50% 100%;
          }
            
          .content {
              border: 1px solid;
              object-fit: cover;
              height: 250px;
              width: 500px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style objectPosition Property
      
      
          The objectPosition property specify how an 
        image or video should be positioned in its content box.
      
      
          
      
    
      
          Change resize
      
    
      
      
          function setObjectPosition() {
              elem = document.querySelector('.content');
              elem.style.objectPosition = 'inherit';
          }
      
  
    

  输出：

  • 点击按钮前：

    

  • 点击按钮后：

    

支持的浏览器： objectPosition属性支持的浏览器如下：

• 谷歌浏览器 31.0
• 浏览器 16.0
• 火狐 36.0
• 歌剧 19.0
• 苹果 Safari 10.1