css和js的合并应用

Original 2018-12-13 14:38:35 193
abstract:如何用js控制,并改变css的样式,颜色,长宽内容<!DOCTYPE html><html><head> <title>测试</title> <style type="text/css"> #box{width: 100px;height: 100px;background: red;margin: 30p

如何用js控制,并改变css的样式,颜色,长宽内容

<!DOCTYPE html>

<html>

<head>

<title>测试</title>

<style type="text/css">

#box{width: 100px;height: 100px;background: red;margin: 30px,50px,20px,10px}

</style>

</head>

<body>

<div id = "box"></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="300px";

}

function bb(){

box.style.width="300px";

}

function cc(){

box.style.background="#000"

}

function dd(){

box.style.height="100px"

box.style.width="100px"

box.style.background="red"

}

function ee(){

box.style.display="none"

}

function ff(){

box.style.display="block"

}


</script>

</body>

</html>


Correcting teacher:韦小宝Correction time:2018-12-13 14:58:04
Teacher's summary:写的很不错!这种效果在很页面都会有类似的!课后记得多练习哦!

Release Notes

Popular Entries