css手抄作业
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; position: relative; } .box1{ width: 100px; height: 100px; background-color: blue; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <img src="./5.jpg"> <div class="box"> <div class="box1"></div> </div> </body> </html> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //css的样式设置 自带getter 和 setter //var res = $('img').css('width','200') //var res = $('img').css('border-radius','50%') //var res = $('img').css('box-shadow','4px 4px 4px #333') // //链式操作 //var res = $('img').css('width','200') //.('border-radius','50%') //.('box-shadow','4px 4px 4px #333') //jq操作 var res = $('img').css({'width':'200' ,'border-radius':'50%' ,'box-shadow':'4px 4px 4px #333'}) //var ras=$('img').css('width') var res=parseInt($('img').css('width')) res += 100 var res= $('img').css('width',res+'px') var res = $('img').css('width') //直接获取width() height() var res = $('img').width() var res = $('img').css('height') var res = $('img').height('200') var res = $('img').height('200') var res = $('img').height('+=200') //offset() var res=$('img').offset() var res=$('img').offset().left //opsition var res=$('box1').offset() var res=$('box1').offset().left+=('') //控制台输出 console.log(res) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例