您的位置：首页 > 其它

属性读写操作注意事项

2016-07-06 10:08 246 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script>
window.onload =function()
{
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oRed = document.getElementById('red1');
var oYellow = document.getElementById('yellow1');
var Op = document.getElementById('p1');
var num = 15;
oBtn1.onclick = function()
{
num++;
//JS中不允许出现“-”,后面单词第一个字母大写。  eg:font-size:fontSize   padding-top:paddingTop
Op.style.fontSize = num+'px';
};
oBtn2.onclick = function()
{
num--;
Op.style.fontSize = num+'px';
};
oRed.onclick = function(){
/*	太过于复杂，建议把一下代码写到样式表里去。
Op.style.width = '300px';
Op.style.background = 'yellow';
Op.style.border = '10px solid #ccc'
Op.style.padding = '20px';
Op.style.color = 'red';
class 保留字  关键字：var function
class =>className*/
Op.className = 'red';
};
oYellow.onclick = function()
{
Op.className = 'yellow';
};
};
</script>
<style>
.red{width:300px;background: pink;border: 10px solid #ccc;padding:20px;color:yellow;}
.yellow{width:300px;background: yellow;border: 10px solid #ccc;padding:20px;color:black;}
</style>
</head>
<body>
<input id="btn1" type="button" value="+"/>
<input id="btn2" type="button" value="-"/>
<input id="red1"  type="button" value="红"/>
<input id="yellow1" type="button" value="黄"/>
<p id="p1" >大家好~</p>      <!--此处不需要加类名  即，class = "red";-->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航