HTML - DOM样式对象textAlign属性



HTML DOM 样式对象 **textAlign** 属性设置或返回块级元素内文本内容的水平对齐方式。

语法

设置 textAlign 属性
object.style.textAlign= "left | right | center | justify | initial | inherit";
获取 textAlign 属性
object.style.textAlign;

属性值

描述
left 这是默认值,将文本左对齐。
right 将文本右对齐。
center 将文本居中对齐。
justify 将文本对齐方式设置为两端对齐。
initial 用于将此属性设置为其默认值。
inherit 用于继承其父元素的属性。

返回值

它返回一个字符串值,表示元素内文本的水平对齐方式。

HTML DOM 样式对象“textAlign”属性示例

以下示例将 div 元素内的 p 元素的对齐方式设置为 **right**、**center** 和 **justify**。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object align Property
    </title>
    <style>
        #align {
        border: 1px solid #04af2f;
    }
    </style>
</head>
<body>
    <p>Click to change text alignment.</p>
    <button onclick="fun()">Right Align</button>
    <button onclick="funTwo()">Center Align</button>
    <button onclick="funThree()">Justify Align</button>
    <div  id="align">
        <p>
            JavaScript is a lightweight, interpreted 
            programming language. It is commonly used
            to create dynamic and interactive elements
            in web applications. JavaScript is very easy
            to implement because it is integrated with 
            HTML. It is open and cross-platform.
            This JavaScript tutorial has been designed 
            for beginners as well as working professionals 
            to help them understand the basic to advanced 
            concepts and functionalities of JavaScript. 
            It covers most of the important concepts 
            related to JavaScript such as operators, control
            flow, functions, objects, OOPs, Asynchronous 
            JavaScript, Events, DOM manipulation and much more.
        </p>   
    </div>       
    <script>
        function fun(){
            document.getElementById("align")
                .style.textAlign="right"
        }
        function funTwo(){
            document.getElementById("align")
                .style.textAlign="center"
        }
        function funThree(){
            document.getElementById("align")
                .style.textAlign="justify"
        }
    </script>
</body>
</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
textAlign 是 1 是 12 是 1 是 1 是 3.5
html_dom_style_object_reference.htm
广告