HTML DOM中的Style marginRight屬性用於設置或返回元素的右邊距。
用法:
- 它返回marginRight屬性。
object.style.marginRight
- 用於設置marginRight屬性。
object.style.marginRight = "length|percentage|auto|initial| inherit"
屬性值:
- length:用於以固定長度單位指定邊距。默認值為0。
例:
<!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display:flex; flex-direction:row; padding:10px 1px; } .div1, .div2 { padding:5px; border:2px solid; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to a fixed value --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = '50px'; } </script> </body> </html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
- 在單擊按鈕之前:
- percentage:用於將邊距量指定為相對於包含元素寬度的百分比。
Example:<!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display:flex; flex-direction:row; padding:10px 1px; } .div1, .div2 { padding:5px; border:2px solid; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to a fixed value --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = '20%'; } </script> </body> </html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
- 在單擊按鈕之前:
- auto:如果該值設置為“自動”,則瀏覽器會自動為邊距大小計算一個合適的值。
例:
<!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display:flex; flex-direction:row; padding:10px 1px; } .div1, .div2 { margin-right:50px; padding:5px; border:2px solid; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to auto --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'auto'; } </script> </body> </html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
- 在單擊按鈕之前:
- initial:用於將屬性設置為其默認值。
例:
<!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display:flex; flex-direction:row; padding:10px 1px; } .div1, .div2 { margin-right:20px; padding:5px; border:2px solid; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to initial --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'initial'; } </script> </body> </html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
- 在單擊按鈕之前:
- inherit:它用於從其父元素繼承值。
例:
<!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { margin-right:50px; display:flex; flex-direction:row; } .div1, .div2 { padding:5px; border:2px solid; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to inherit --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'inherit'; } </script> </body> </html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
支持的瀏覽器:DOM樣式marginRight屬性支持的瀏覽器如下:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- Safari
- 在單擊按鈕之前:
相關用法
- HTML Style top用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style animationDirection用法及代碼示例
注:本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 HTML | DOM Style marginRight Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。