使用js来控制css样式

原创 2019-01-24 10:18:34 346
摘要:<html><head> <meta charset='utf-8'>    <style> #box{ width:100px; height:100px; background:red; margin: 20px 80px; }    </style></h

<html>

<head>

<meta charset='utf-8'>

    <style>

#box{

width:100px; height:100px;

background:red;

margin: 20px 80px;

}

    </style>

</head>

<body>

<div id="box"></div>

<input onclick="aa()" type="button" value="变高">

<input onclick="bb()" type="button" value="变宽">

<input onclick="cc()" type="button" value="变色">

<input onclick="dd()" type="button" value="重置">

<input onclick="ee()" type="button" value="显示">

<input onclick="ff()" type="button" value="隐藏">

</body>

</html>

<script>

var box 

window.onload = function(){

box = document.getElementById('box')

}


function aa(){

box.style.height = '350px'

}


function bb(){

box.style.width = '400px'

}


function cc(){

box.style.background = 'blue'

}


function dd(){

box.style.height='100'

box.style.width='100'

box.style.background='red'

}


function ee(){

box.style.display = 'block'

}


function ff(){

box.style.display = 'none'

}

</script>


批改老师:灭绝师太批改时间:2019-01-24 10:23:38
老师总结:完成的不错,写出来的每一行代码都要知道代码的作用哦!

发布手记

热门词条