css() attr()代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>attr()及css()的学习</title> </head> <body> <img src="http://p1.so.qhmsg.com/t01fefeafb1d03a3a46.jpg" alt="美女" width="200" style="border-radius: 50%;"> <br> <button id="n1" type="button">增大</button> <button id="n2" type="button">变小</button> <button id="n3" type="button">还原</button> <button id="n4" type="button">更换</button> <button id="n5" type="button">增加阴影</button> <button id="n6" type="button">改变按钮样式</button> </body> <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $("#n1").click(function(){ $("img").attr("width","400px") }) $("#n2").click(function(){ $("img").attr("width","100px") }) $("#n3").click(function(){ $("img").attr("width","200px") }) $("#n4").click(function(){ $("img").attr("src","http://p0.so.qhimgs1.com/bdr/326__/t01fb33b1a4437ba3ac.jpg") }) $("#n5").click(function(){ $("img").css("box-shadow","2px 2px 5px #666") }) $("#n6").click(function(){ $("button").css({"backgroundColor":"red","color":"white"}) }) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
width() height() position()等知识的学习:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>width及height的学习</title> </head> <body> <div id="div1" style="height:200px;width:300px;padding:0;margin:0;border:1px solid orange;background-color:#A566F4;"></div> <button id="but1" type="button">显示尺寸</button> <button id="but2" type="button">位置偏移</button> <button id="but3" type="button">位置尺寸</button> </body> <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $("#but1").click(function() { var txt="" txt+="宽度是:"+$("#div1").width()+"px"+"\n"+"高度是:"+$("#div1").height()+"px" alert(txt) }) $("#but2").click(function() { $("#div1").offset({top:200,left:200}) }) $("#but3").click(function() { txt=$("#div1").position() alert("顶部位置:"+txt.top+"\n"+"左部位置:"+txt.left) }) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写内容: