收藏
批改状态：合格
老师批语：
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>点击 "运行实例" 按钮查看在线实例
手写内容：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
