我有一支仙女棒,变大变小变漂亮~

Original 2019-01-13 18:47:51 243
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

div{margin:0px auto;}

#box{width:500px;height:500px;background-color: aquamarine;display: block;}

</style>

<script>

var box

window.onload = function(){

box = document.getElementById("box");

}

function box_width_add(){

box.style.width = "700px";

}

function box_height_add(){

box.style.height = "700px";

}


function box_color(){

box.style.backgroundColor = "pink";

}


function box_display_none(){

box.style.display = "none";

}


function box_display_block(){

box.style.display = "block";

}


function box_border(){

box.style.border = "5px solid #ccc";

}

function box_radius(){

box.style.borderRadius = "50px";

}

function box_restyle(){

box.style.width = "500px";

box.style.height = "500px";

box.style.backgroundColor = "aquamarine";

box.style.border = "none"

box.style.borderRadius = "0px";

box.style.display = "block";

}

</script>

</head>

<body>

<div id="box">


</div>


<br>

<br>

<br>

<br>

<br>

<div>

<button onclick="box_height_add()">变高</button>

<button onclick="box_width_add()">变宽</button>

<button onclick="box_color()">变色</button>

<button onclick="box_display_none()">隐藏</button>

<button onclick="box_display_block()">显示</button>

<button onclick="box_border()">添加边框线</button>

<button onclick="box_radius()">添加圆角</button>

<button onclick="box_restyle()">重置</button>

</div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-01-13 19:16:05
Teacher's summary:function box_radius(){ box.style.borderRadius = "50px"; }这里的box,最好用参数传入

Release Notes

Popular Entries