js改变css属性

Original 2019-05-11 14:02:42 278
abstract:<!DOCTYPE html><html>             <head>             &nb

<!DOCTYPE html>

<html>

             <head>

                     <title></title>

                     <meta charset="utf-8">

                     <style type="text/css">

                     #box{

                     width:100px;height:100px;background:red;margin:20px 80px;

                     }           

                     </style>

             </head>

<body>

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

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

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

                 <input type="button" value="背景色" onclick="changebackground()">

                 <input type="button" value="改变形状" onclick="changecicrl()">

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

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

                 <script type="text/javascript">

                 var box;

                 window.onload=function(){

                 box=document.getElementById('box');

                 }

                 function changeHeight(){

                 box.style.height="200px";

                 }

                 function changewidth(){

                 box.style.width="200px";

                 }

                 function changebackground(){

                 box.style.background='pink';

                 }

                 function changecicrl(){

                 box.style.borderRadius='50%';

                 }

                 function display(){

                 box.style.display='block';

                

                 }

                 function nodisplay(){

                 box.style.display='none';

                 }               

                 </script>




</body>

</html>


Correcting teacher:查无此人Correction time:2019-05-13 09:33:18
Teacher's summary:完成的不错。js控制标签很方便,多练习,对逻辑有帮助。继续加油

Release Notes

Popular Entries