首页 > 代码库 > javascript学习--段落字体的放大与缩小
javascript学习--段落字体的放大与缩小
注意：javascript中的CSS样式与非javascript中的样式不同，在非javascript中的样式字体大小：font-size,而在javascript中则是fontSize.
在非javascript中的样式中“-”改写为第二个字母大写
<!DOCTYPE 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">
.re {
background-color:gray;
font-weight:200;
padding:30px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btnBig = document.getElementById(‘big‘);
var btnLit = document.getElementById(‘litter‘);
var btnstyle = document.getElementById(‘btnStyle‘);
var p1 = document.getElementById(‘pnew‘);
var fz = 12;
//放大
btnBig.onclick = function () {
fz++;
p1.style.fontSize = fz+ "px";
}
//缩小
btnLit.onclick = function () {
if (fz > 0) {
fz--;
p1.style.fontSize = fz + "px";
}
else {
alert("不能再小了！");
}
}
//设置格式
btnstyle.onclick = function () {
p1.className = ‘re‘;
}
}
</script>
</head>
<body>
<input type="button" id="big" value="http://www.mamicode.com/增大" />
<input type="button" id="litter" value="http://www.mamicode.com/缩小" />
<input type="button" id="btnStyle" value="http://www.mamicode.com/设置样式"/>
<p id="pnew">
他说，过去两至三周，警方以极度容忍的态度来处理示威人士的非法行为，
目的是希望有关人士能够冷静下来，
重新以和平理性和合法的方式来表达他们的诉求。非常遗憾，他们仍然依然故我，
甚至变本加厉。这些违法行为正在不断伤害香港，令到上学的不能正常上学，上班的不能正常上班，
做生意的不能正常做生意，生病的人不能正常复诊，各行各业受到非常严重的影响。
</p>
</body>
</html>
本文出自 “Day Day Up” 博客，请务必保留此出处http://1433189426.blog.51cto.com/8055494/1565730
javascript学习--段落字体的放大与缩小