怎样用JS设置text中文本的对齐方式
发布网友
共3个回答
懂视网
本文主要和大家分享JS中使用textPath实现线条上文字的方法教程，近期在项目中要实现关系图,需要在线条上绘制文字。要实现这个功能,我们需要在SVG中连接的线条从标签line修改为path,这样才可能实现类似如下的效果:
1个简单的例子如下所示:
在这里我们需要实现1个path,然后设置其ID属性,之后我们创建textPath标签,并链接到上述的ID属性,这样就可以实现在路径上关联文字了。
而在D3中我们可以这样操作:
实际上这段代码就是上述例子的实现,这样就可以避免编写繁琐的SVG代码了。
热心网友
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
border:1px solid #000;
text-align:left;
}
</style>
</head>
<body>
<div id="div">52313</div>
<script>
(function(){
var o_div=document.getElementById("div");
o_div.style.textAlign="right";
})()
</script>
</body>
</html>
热心网友
我不知道你说的text是指标签<p>中还是<textare>中，反正方法都是一样的，看下面的例子
<p id="txt">这是一段文字</p><script type="text/javascript">
var txt = document.getElementById("txt");
txt.style.textAlign="center"; //left,center,right这里设置
</script>
下面是一个点击按钮更改文字对齐方式的小例子
<button data="left">左对齐</button><button data="center">中间对齐</button>
<button data="right">右对齐</button>
<p id="txt">这是一段文字</p>
<script type="text/javascript">
var txt = document.getElementById("txt"); //获取P元素
var btns = document.getElementsByTagName("button"); //获取button元素，这是一个数组
for (var i = 0; i < btns.length; i++) {
btns[i].onclick=function(){ //点击按钮
txt.style.textAlign=this.getAttribute("data"); //将文字的对齐方式设置为被点击按钮的data属性值
}
}
</script>
