<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
</head>
<body>
<div id="box" style="width: 900px; color: rgba(0,255,0,1);line-height: 100%; height: 300px; margin: 90px auto;border: 10px solid #f00; font-size: 18px;font-family:'楷体'" ">
文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置
文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置
文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置 文本设置
</div>
<div style="width: 900px; height: 30px; margin: 10px auto;word-spacing: 1em;">
<a style="font-size: 30px;" id="add" href="javascript:void(0)">变大
</a>
<a style="font-size: 30px;" id="sub" href="javascript:void(0)">变小
</a>
<a style="font-size: 30px;" id="w" href="javascript:void(0)">加粗
</a>
<a style="font-size: 30px;" id="s" href="javascript:void(0)">缩进
</a>
<a style="font-size: 30px;" id="f" href="javascript:void(0)">字体
</a>
<a style="font-size: 30px;" id="c" href="javascript:void(0)">颜色
</a>
</div>
</body>
</html>
<script type="text/javascript">
var add = document.getElementById("add");
var sub = document.getElementById("sub");
var box = document.getElementById("box");
var w = document.getElementById("w");
var s = document.getElementById("s");
var f = document.getElementById("f");
var c = document.getElementById("c");
var num = 12;
add.onclick = function () {
if (num < 24) {
box.style.fontSize = num +"px";
num ++;
}else {
box.style.fontSize = num +"px";
}
}
sub.onclick = function () {
if (num > 10) {
box.style.fontSize = num +"px";
num --;
}else {
box.style.fontSize = num +"px";
}
}
w.onclick = function () {
box.style.fontWeight = "bold";
}
s.onclick = function () {
box.style.textIndent = '2em';
}
f.onclick = function () {
box.style.fontFamily = '微软雅黑';
}
c.onclick = function () {
box.style.color = '#f0f';
}
</script>
