![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
1、attr()和removeAttr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()方法</title>
</head>
<body>
<!-- html5中,可以通过data-前缀给标签添加用户自定义属性 -->
<img src="../images/ao.png" width="200" alt="赫本" title="明星" id="pic" data-nation="英国">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//attr():元素属性的获取与设置
//1.必须传参，不传参数报错
// var res = $('img').attr()
//2.一个参数，获取对应参数的值，可以是自定义属性
var res = $('img').attr('title')
var res = $('img').attr('alt')
var res = $('img').attr('data-nation')
//3.双参数为获取,第一个是属性名,第二个是要设置的新值
var res = $('img').attr('title','女明星')
$('#pic').attr('style', 'border-radius: 50%;box-shadow:2px 2px 2px #888')
//4.attr()的属性值,还支持回调函数
var res = $('img').attr('width',function(){return 100+100})
// removeAttr():删除元素的属性
// var res = $('img').removeAttr('title')
var res = $('img').removeAttr('title alt data-nation')
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
2.class()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式css()</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top:50px;
left: 20px;
}
</style>
</head>
<body>
<img src="../images/ao.png">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//css()方法与attr()方法很相似,也是自带读到与设置特征
//根据参数数量确定要执行的操作,一个参数是读取,二个参数是设置
//功能相当于读到或设置当前元素的style属性的值,其实就是内联样式
//1.设置样式 css(name,value)
// var res = $('img').css('width',200)
// var res = $('img').css('border-radius','50%')
//同时设置多个属性
var res = $('img').css({
'width':200,
'border-radius':'50%'
})
var res = $('img').css('width')
var res = parseInt($('img').css('width'))
res += 50
var res = $('img').css('width',res+'px')
// width()和height()方法
var res = $('img').width()
var res = $('img').width('-=50')
var res = $('img').css('width','+=50')
// 4.获取元素的位置:offset(),返回的是一个对象
var res = $('img').offset()
var res = $('img').offset().left
var res = $('img').offset().top
//5.查看绝对定位元素的偏移量: position()
var res = $('.box2').position()
var res = $('.box2').position().top
var res = $('.box2').position().left
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
3.手写css()方法
