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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。