• 技术文章 >web前端 >前端问答

    JavaScript中怎么实现文本左对齐

    青灯夜游青灯夜游2022-02-08 11:32:22原创599

    方法:1、利用setAttribute(),语法“元素对象.setAttribute("style","text-align:left")”;2、利用textAlign属性,语法“元素对象.style.textAlign="left";”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    JavaScript中实现文本左对齐

    方法1:利用setAttribute()

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div{
    				border: 2px solid red;
    				text-align: right;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="box">一个div元素</div><br />
    		<button onclick="replaceMessage()"> 让文本左对齐</a>
    
    			<script type="text/javascript">
    				function replaceMessage() {
    					var div = document.getElementById("box");
    					div.setAttribute("style", "text-align: left;");
    				}
    			</script>
    
    	</body>
    </html>

    1.gif

    setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。

    方法2:利用style对象的textAlign属性

    textAlign 属性用于控制元素中文本的对齐方式,当值设置为“left”则可把文本排列到左边。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div{
    				border: 2px solid red;
    				text-align: right;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="box">一个div元素</div><br />
    		<button onclick="replaceMessage()"> 让文本左对齐</a>
    
    			<script type="text/javascript">
    				function replaceMessage() {
    					var div = document.getElementById("box");
    					// div.setAttribute("style", "text-align: left;");
    					div.style.textAlign="left";
    				}
    			</script>
    
    	</body>
    </html>

    2.gif

    【相关推荐:javascript学习教程

    以上就是JavaScript中怎么实现文本左对齐的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:asp和javascript是什么意思 下一篇:javascript中对行为的定义是什么
    千万级数据并发解决方案

    相关文章推荐

    • javascript中round的意思是什么• 深入了解JavaScript基础之函数与作用域• 详细介绍JavaScript提高学习之ES6• jsp中可以执行javascript代码吗• JavaScript怎么实现跨域
    1/1

    PHP中文网