当前位置: 首页>>代码示例>>用法及示例精选>>正文


HTML Style right用法及代码示例

HTML DOM中的Style right属性用于设置或返回定位元素的正确位置,包括填充,滚动条,边框和边距。
用法:

  • 它用于返回正确的属性:
    object.style.right
  • 它用于设置正确的属性:
    object.style.right = "auto|length|%|initial|inherit"

属性值说明

  • auto-此值由浏览器自动设置默认权限值。
  • length-该值以指定的长度单位设置正确的值。此指定的长度可以为正,也可以为负。
  • %-百分比值以父元素宽度的指定百分比设置正确的值。
  • initial-此值将right属性设置为其浏览器的默认值。
  • inherit-此值将right属性设置为其父元素的值。

范例1:


<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style right Property 
    </title> 
    <style> 
        #GfG { 
            position:absolute; 
            background-color:green; 
            color:white; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1> Geeks for Geeks </h1> 
    <h2> HTML|DOM Style right Property </h2> 
  
    <button onclick="myFunction()">Click here</button> 
  
    <GfG id="GfG"> 
        <h1>GfG</h1> 
    </GfG> 
  
    <script> 
        function myFunction() { 
            document.getElementById("GfG") 
            .style.right = "100px"; 
        } 
    </script> 
  
</body> 
  
</html>

输出:

  • 在单击按钮之前:
  • 单击按钮后:

    范例2:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            HTML | DOM Style right Property 
        </title> 
        <style> 
            #myGfG { 
                border:1px solid #FF0000; 
                position:relative; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <h1> Geeks for Geeks </h1> 
        <h2> HTML|DOM Style right Property </h2> 
      
        <GfG id="myGfG">Welcome to Geeks for Geeks.</GfG> 
        <br> 
      
        <button type="button" onclick="myFunction()"> 
         Click Here! 
        </button> 
      
        <script> 
            function myFunction() { 
                document.getElementById("myGfG") 
                    .style.right = "-200px"; 
            } 
      
            < GfG id = "myGfG" > Welcome to Geeks 
            for Geeks. < /GfG> < br > 
      
            < button type = "button"
            onclick = "myFunction()" > Click Here! < /button> 
      
            < script > 
                function myFunction() { 
                    document.getElementById("myGfG") 
                        .style.right = "-200px"; 
                } 
        </script> 
      
    </body> 
      
    </html> 
    </script> 
      
    </body> 
    </html>

    输出:

    • 在单击按钮之前:
    • 单击按钮后:

    支持的浏览器:DOM样式right属性支持的浏览器如下:

    • 谷歌浏览器
    • IE浏览器
    • Firefox
    • Opera
    • Safari


相关用法

注:本文由纯净天空筛选整理自divyatagoel0709大神的英文原创作品 HTML | DOM Style right Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。