HTML DOM中的样式方向属性用于设置或返回元素的文本方向。
用法:
- 用于设置文本方向。
object.style.direction = "ltr|rtl|initial|inherit"
- 它返回文本方向。
object.style.direction
属性值:
- ltr:从左到右指定方向,这也是默认方向。
- rtl:将方向指定为从右到左。
- initial:将属性设置为其默认值。
- inherit:从父元素继承属性。
返回值:它返回文本内容的文本方向。
范例1:本示例从右到左设置文本方向。
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style direction Property
</title>
</head>
<body>
<div>
<!-- Style direction Property used here -->
<p id = "para">
Welcome to GeeksforGeeks
</p>
</div>
<input type = "button" value = "Click Here!"
onclick = "myGeeks()" />
<!-- script to set text direction -->
<script>
function myGeeks() {
document.getElementById("para").style.direction
= "rtl";
}
</script>
</body>
</html>
输出:
之前单击按钮:
单击按钮后:
范例2:本示例返回文本内容的方向。
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style direction Property
</title>
</head>
<body>
<div>
<p id = "para" style = "direction:rtl">
Welcome to GeeksforGeeks
</p>
</div>
<input type = "button" value = "Click Here!"
onclick = "myGeeks()" />
<!-- script returns the content direction -->
<script>
function myGeeks() {
alert(document.getElementById("para").style.direction);
}
</script>
</body>
</html>
输出:
之前单击按钮:
单击按钮后:
支持的浏览器:样式方向属性支持的浏览器如下:
- 谷歌浏览器
- IE浏览器
- Firefox
- Opera
- Safari
相关用法
- HTML Style top用法及代码示例
- HTML Style right用法及代码示例
- HTML Style height用法及代码示例
- HTML Style textDecoration用法及代码示例
- HTML Style opacity用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style whiteSpace用法及代码示例
- HTML Style textDecorationLine用法及代码示例
- HTML Style textAlign用法及代码示例
- HTML Style position用法及代码示例
- HTML Style transitionProperty用法及代码示例
- HTML Style animationDirection用法及代码示例
- HTML Style isolation用法及代码示例
- HTML Style clear用法及代码示例
- HTML Style columns用法及代码示例
注:本文由纯净天空筛选整理自kundankumarjha大神的英文原创作品 HTML | DOM Style direction Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。