div css样式控制案例

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div -css样式控制案例</title> <style> #box{width:100px; height: 100px;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div -css样式控制案例</title>
<style>
#box{width:100px; height: 100px; background: pink;display="none"}
</style>
</head>
<body>
<div id="box"> 
</div>
<input type="button" value="变红" onclick="bred(this)">
<input type="button" value="变大" onclick="bda(this)">
<input type="button" value="变圆" onclick="byuan(this)">
<input type="button" value="还原" onclick="bhuan(this)">
<input type="button" value="隐藏" onclick="byin(this)">
<input type="button" value="显示" onclick="bxian(this)">

<script >
var box
window.onload=function() {
box=document.getElementById('box')//全局声明
}
function bred() {
box.style.background="red"//变红
}
function bda() {
box.style.width="120px"
box.style.height="120px"//变大
}
function byuan() {
box.style.borderRadius="60px"//变圆
}
function bhuan() {
box.style.borderRadius="0px"//还原
box.style.width="100px"//还原
box.style.height="100px"//还原
box.style.background="pink"//还原
}
function byin() {
box.style.display="none"//隐藏
}
function bxian() {
box.style.display="block"//显示
}
</script>
</body>
</html>

QQ截图20181224144321.png

Correcting teacher：天蓬老师Correction time：2018-12-24 15:24:05
Teacher's summary：这个案例很有创意, 相信写完之后, 对基本的样式控制基本上掌握了

div css样式控制案例

Popular Entries