用JS实现段落文字排版！急！！！ 需要的效果请在浏览器打开下面页面
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"宋体";}
div{width:400px; height:150px; border:1px solid red; }
/*请用JS*/
</style>
</head>
<body>
<input type="submit" value="自动排版" /><input type="submit" value="清除空行" />
<div>
<p>新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p>新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击自动排版时候，每个段落的文字需要变成下面显示这样，就是段落前面缩进2个文字，行与行之间加入<br>-->
<div>
<p style="line-height:28px; text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style="line-height:28px; text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击清除空格时候变成下面这种显示效果-->
<div>
<p style=" text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style=" text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"宋体";}
div{width:400px; height:150px; border:1px solid red; }
/*请用JS*/
</style>
</head>
<body>
<input type="submit" value="自动排版" /><input type="submit" value="清除空行" />
<div>
<p>新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p>新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击自动排版时候，每个段落的文字需要变成下面显示这样，就是段落前面缩进2个文字，行与行之间加入<br>-->
<div>
<p style="line-height:28px; text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style="line-height:28px; text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击清除空格时候变成下面这种显示效果-->
<div>
<p style=" text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style=" text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
</body>
</html> 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"宋体";}
div{width:400px; height:150px; border:1px solid red; }
/*请用JS*/
</style>
<script type="text/javascript">
function run(divID){
var temp = document.getElementById(divID).getElementsByTagName("p");
for(var i=0; i<temp.length; i++){
temp[i].style.lineHeight = "28px";
temp[i].style.textIndent = "2em";
}
}
function clearStyle(divID){
var temp = document.getElementById(divID).getElementsByTagName("p");
for(var i=0; i<temp.length; i++){
temp[i].style.lineHeight = "150%";
temp[i].style.textIndent = 0;
}
}
</script>
</head>
<body>
<input type="submit" value="自动排版" onclick="run('textDiv')" />
<input type="submit" value="清除空行" onclick="clearStyle('textDiv')" />
<div id="textDiv">
<p>新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p>新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击自动排版时候，每个段落的文字需要变成下面显示这样，就是段落前面缩进2个文字，行与行之间加入<br>-->
<div>
<p style="line-height:28px; text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style="line-height:28px; text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击清除空格时候变成下面这种显示效果-->
<div>
<p style=" text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style=" text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"宋体";}
div{width:400px; height:150px; border:1px solid red; }
/*请用JS*/
</style>
<script type="text/javascript">
function run(divID){
var temp = document.getElementById(divID).getElementsByTagName("p");
for(var i=0; i<temp.length; i++){
temp[i].style.lineHeight = "28px";
temp[i].style.textIndent = "2em";
}
}
function clearStyle(divID){
var temp = document.getElementById(divID).getElementsByTagName("p");
for(var i=0; i<temp.length; i++){
temp[i].style.lineHeight = "150%";
temp[i].style.textIndent = 0;
}
}
</script>
</head>
<body>
<input type="submit" value="自动排版" onclick="run('textDiv')" />
<input type="submit" value="清除空行" onclick="clearStyle('textDiv')" />
<div id="textDiv">
<p>新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p>新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击自动排版时候，每个段落的文字需要变成下面显示这样，就是段落前面缩进2个文字，行与行之间加入<br>-->
<div>
<p style="line-height:28px; text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style="line-height:28px; text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
<br /><br /><br /><br /><br />
<!--点击清除空格时候变成下面这种显示效果-->
<div>
<p style=" text-indent:24px;">新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</p>
<p style=" text-indent:24px;">新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2新闻2</p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
