文字大小改变实例——if语句和className的使用

来源：互联网发布：同花顺炒股软件好吗编辑：程序博客网时间：2024/06/03 18:44

[html] view plaincopy

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字大小改变实例——if语句和className的使用</title>
<style>
.red { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:red; }
.green { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:green; }
</style>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p1');
var num = 16;
//字体变小
oBtn1.onclick = function(){
if(num>=12){
num--;
oP.style.fontSize = num + 'px';
}
};
//字体变大
oBtn2.onclick = function(){
if(num<=24){
num++;
oP.style.fontSize = num + 'px';
}
};
//文字变红
oBtn3.onclick = function(){
oP.className = 'red';
};
//文字变绿
oBtn4.onclick = function(){
oP.className = 'green';
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" style="font-size:16px;">这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落。</p>
</body>
</html>

0 0