js控制css属性

Original 2018-12-16 00:24:38 356
abstract:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #box{width: 100px;height: 100px;background: pink; margin:20px 80px;} </style>

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

#box{width: 100px;height: 100px;background: pink;

margin:20px 80px;}

</style>

</head>

<body>

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

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

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

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

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

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

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

<script type="text/javascript">

var box;

window.onload=function(){

box=document.getElementById('box');

}

function aa()

{

box.style.height="200px";

}

function bb()

{

box.style.width="200px";

}

function cc()

{

box.style.background="black";

}

function dd()

{

box.style.height="100px";

box.style.width="100px";

box.style.background="pink";

box.style.display="block";

}

function ee()

{

box.style.display="none";

}

function ff()

{

box.style.display="block";

}

</script>

</body>

</html>

js控制css style属性



Correcting teacher:天蓬老师Correction time:2018-12-16 09:00:43
Teacher's summary:js中的css控制, 大多是直接操作元素的style属性,这是一个对象, 其实还可以操作计算属性,可以参考一些专业书看看

Release Notes

Popular Entries