收藏
批改状态：合格
老师批语：
代码作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>1.attr()方法</h2>
<p>attr() 方法设置或返回被选元素的属性值。</p>
<img src="./image/datong.jpg" width="80"><br>
<button id="attr">设置图片width属性</button>
<h2>2.jQuery css() 方法</h2>
<p>css() 方法设置或返回被选元素的一个或多个样式属性。</p>
<p id="css">这是一个P段落，原背景色为白色，字号大小正常</p>
<button id="css">设置css</button>
<h2>3.width() 方法</h2>
<p>width() 方法返回或设置匹配元素的宽度</p>
<p id="widht1">本段落的宽度是<span id="widht1"></span></p>
<button id="widht1">获取width属性值</button>
<h2>4.height()方法</h2>
<p>height() 方法返回或设置匹配元素的高度。</p>
<p id="height1">本段落的高度是<span id="height1"></span></p>
<button id="height1">设置height属性值</button>
<h2>5.offset()方法</h2>
<P>offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。</P>
<p id="offset">这是原来的位置</p>
<button id="offset">设置新的偏移</button>
<h2>6.position() 方法</h2>
<P>position() 方法返回匹配元素相对于父元素的位置（偏移）。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。
此方法只对可见元素有效。 </P>
<p id="position">这是5中P段落位置<span></span></p>
<button id="position">获取元素位置</button>
</body>
</html>
<script type="text/javascript" src="./css/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#attr").click(function(){
alert("原图片width尺寸："+$("img").attr("width"));
$("img").attr({"width":"120","height":"150"})
alert("设置后图片width尺寸："+$("img").attr("width"));
})
$("button#css").click(function(){
$("p#css").css({"background-color":"yellow","font-size":"1.2em"});
})
$("button#widht1").click(function(){
$("span#widht1").text($("P#widht1").width()+"px")
})
$("button#height1").click(function(){
$("span#height1").text($("p#height1").height()+"px")
})
$("button#offset").click(function(){
$("p#offset").offset({top:50,left:50})
})
$("button#position").click(function(){
$("p#position span").text("left:"+$("p#offset").position().left+"px, top:"+$("p#offset").position().top+"px")
})
})
</script>点击 "运行实例" 按钮查看在线实例
手抄代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
