改变css样式

Original 2018-12-14 17:09:05 259
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>控制div样式</title>    <style>  

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>控制div样式</title>
   <style>
       #yangshi{width: 100px;height: 100px;background: #0a6aa1;margin: 10px 30px;}
   </style>
</head>
<body>
<script type="text/javascript">
   var my;
   window.onload=function (){
      my=document.getElementById(yangshi);
   };
   function wid(){
       yangshi.style.width="300px"
}
   function hei(){
       yangshi.style.height="300px"
}
   function color(){
       yangshi.style.background="green"
}
   function reset(){
       yangshi.style.width="100px";
       yangshi.style.height="100px";
       yangshi.style.background="#0a6aa1";
   }
   function hide(){
       yangshi.style.display="none"
}
   function show(){
       yangshi.style.display="block"
}
</script>
<div id="yangshi" ></div>
<input type="button" value="变宽" onclick="wid()">
<input type="button" value="变高" onclick="hei()">
<input type="button" value="改变颜色" onclick="color()">
<input type="button" value="重置" onclick="reset()">
<input type="button" value="隐藏" onclick="hide()">
<input type="button" value="显示" onclick="show()">

</body>
</html>

Correcting teacher:韦小宝Correction time:2018-12-14 17:15:42
Teacher's summary:写的很不错!课后记得多练习多总结!加油吧!

Release Notes

Popular Entries