通过js来改变CSS样式

Original 2019-04-08 15:22:43 203
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js来改变一下样式</title><style type="text/css">.box{width: 100px;height: 100px;background

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js来改变一下样式</title>

<style type="text/css">

.box{width: 100px;height: 100px;background: red;margin-bottom:20px ;}

.boxx{width: 100px;height: 300px;background: red; }

.boxxx{width: 300px;height: 300px;background: blue; }

</style>

</head>

<body>

<div></div>

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

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

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

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

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

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



<script type="text/javascript">

var box=document.getElementsByClassName('box')[0]

var box1=document.getElementsByTagName('div')[0]

function bg(num) {

box.className="boxx"

}

function bk(num) {

box.style.cssText="width: 200px;"

}

function bs(num) {

box1.style.background="blue"

}

function cz(num) {

box1.style.cssText="width: 100px;height: 100px;background: red;margin-bottom:20px ;"

}

function yc(num) {

box.style.display="none"

}

function xs(num) {

box.style.display="block"

}


</script>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-04-08 16:04:39
Teacher's summary:完成的不错。每行js代码,后面增加;号。继续加油

Release Notes

Popular Entries