收藏
批改状态：合格
老师批语：
结果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>设置内联样式CSS</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.container{
width: 400px;
height:400px;
background-color: lightgray;
position: absolute;
left:100px;
top:100px;
}
img{
width: 300px;
height: 300px;
position: relative;
top: 50px;
left: 60px;
}
</style>
</script>
</head>
<body>
<div class="container">
<img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=43611e0509653556bddd8365edea569b&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fb21c8701a18b87d6ad4b14bb060828381f30fd0d.jpg" alt="">
</div>
</body>
<script type="text/javascript">
//attr方法
$('img').attr('style','box-shadow:4px 4px 5px #888')
//CSS方法
$('img').css('border-radius','10%')
//width方法
$('img').width(350)
//height方法
$('img').height(350)
// offset方法 查询距离左边和顶部的偏移量
var res = $('img').offset().top
var res = $('img').offset().left
// position方法 查询在父级区块中的偏移量
var res = $('img').position().top
var res = $('img').position().left
$('.container').width('+=60').height('+=50')
//控制台查看结果
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
