实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()和css()的用法</title>
<style type="text/css">
body{
text-align: center;
margin: 30px auto;
}
.box1{
width: 200px;
height: 200px;
background-color: #e55555;
margin: 30px auto;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
position: relative;
top: 30px;
left: 50px;
}
</style>
</head>
<body>
<img src="images/1.jpg" alt="沙漠" title="图片" id="pic" data-nation="小明">
<div class="box1"><div class="box2"></div></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// attr()属性的获取与设置
var res = $('img').attr('style','border-radius:10px;box-shadow:2px 2px 4px #ccc')
// css()设置样式
var res = $('img').css('width',400)
var res = $('img').css({
'width':'450','box-shadow':'4px 4px 8px #ee0000'
})
// jquery针对宽高样式有两个专用方法
var res = $('img').width(300)
// 支持运算符的简写
var res =$('img').width('+=50')
var res =$('img').width()
var res = $('img').height(150)
// 支持运算符的简写
var res =$('img').height('+=50')
var res =$('img').height()
// 获取元素的位置：offset(),返回的是一个对象
var res=$('img').offset().left
var res=$('img').offset().top
// 查看绝对定位的偏移量
var res =$('.box2').position().left
var res =$('.box2').position().top
console.log(res)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
