收藏
批改状态：合格
老师批语：
以下代码主要是练习attr()和css()的使用方法，通过attr()和css()获取元素对应的各种属性，并延伸出了一些快捷的获取方法，通过width()height()来获取宽和高的数据，通过offset()position()来获取元素的位置的数据，与大家分享一下
attr()的使用代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()的使用</title>
</head>
<body>
<img src="1.jpg" width="300" id="pic" alt="我是图" title="Fate" data-person="hero">
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// attr()可以获取当前元素的属性，获取到图片的src属性是1.jpg
var test = $('img').attr('src')
// attr()可以将当前元素的属性进行替换，将src属性替换为2.jpg
var test = $('img').attr('src','2.jpg')
// attr()可以将当前元素的多个属性进行替换，将style默认属性替换为后面的指定属性
var test = $('img').attr('style','border-radius:50%;box-shadow:3px 3px 3px #999')
// attr()可以获取自定义属性
var test = $('img').attr('data-person')
// attr()的属性支持回调函数
$('img').attr('width',function(){return 150})
var test = $('img').attr('width')
// 删除图片属性
var test = $('img').removeAttr('style')
// 删除图片多个属性
var test = $('img').removeAttr('alt title data-person')
var test = $('img').attr('alt')
var test = $('img').attr('title')
var test = $('img').attr('data-person')
console.log(test)
</script>
</html>点击 "运行实例" 按钮查看在线实例
css()的使用代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css()的使用</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 80px;
left: 50px;
}
</style>
</head>
<body>
<img src="1.jpg">
<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">
// 使用css()设置单个样式
var test = $('img').css('width',400)
// 使用css()设置多个样式
var test = $('img').css({
'border-radius':'30%',
'box-shadow':'5px 5px 5px #999',
'width':300
})
// 使用css()读取样式
var test = $('img').css('box-shadow')
// 使用css()读取宽度返回的是字符串，而不是数字
var test = $('img').css('width')
// 若要增加宽度，需转换之后再加，而不能直接加
var test = parseInt($('img').css('width'),10) //300
test += 100
var test = $('img').css('width',test+'px')
var test = $('img').css('width')//400px
//针对宽高的专有方法：width(),height()
var test = $('img').width(200)
var test = $('img').height(300)
var test = $('img').width('+=100') //300
var test = $('img').width()
var test = $('img').height('+=100') //400
var test = $('img').height()
//使用offset()可获取当前元素的位置
var test = $('img').offset()
var test = $('img').offset().top
var test = $('img').offset().left
//使用position()可获取当前元素的位置
var test = $('.box2').position()
var test = $('.box2').position().top
var test = $('.box2').position().left
console.log(test)
</script>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：
总结：
在JS中，可以通过attr()获取以及设置元素的基本属性，自定义属性，并可以对这样属性进行操作替换等，而且还支持回调函数
在JS中，可以通过css()获取以及设置元素的内联样式，对这些样式进行重新设置以及替换。
为了方便使用，延伸出了通过width()height()快捷获取元素宽高的方法，通过offset()和position()获取元素位置的方法。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
