![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：
收藏
![PHP实战开发极速入门： PHP快速创建[小型商业论坛]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
收藏
收藏
大家好：以下为我对attr和css的用法的部分总结，如有错误望大家指出，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()和css()的用法</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
position: relative;
}
img {
margin: 20px 50px;
position: absolute;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="风景" title="海洋风景" id="pic" data-weather="晴天">
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//当attr中为单参数时，此时为获取元素属性值
var res = $('#pic').attr('src')
//当attr中为双参数时，此时为更改元素属性值(第一个是属性名,第二个是要设置的新值)
$('#pic').attr('title','森林海洋')
//attr可以获取自定义属性的值
var res = $('#pic').attr('data-nation')
//attr()的属性值,还支持回调函数
$('#pic').attr('width', function(){return 200+100})
//removeAttr可以同时删除一个或多个属性,多个属性之间用空格分开前元素的状态
var res = $('#pic').removeAttr('title data-weather')
// 设置css样式
var res = $('img').css('border-radius', '10%')
// 可以同时设置多个样式
var res = $('img').css({
'border-radius': '10%',
'box-shadow': '3px 3px 3px #888'
})
//读取样式 css(name),返回的都是字符串类型
var res = $('img').css('box-shadow')
//将图片宽高设置为200,单位默认为px
var res = $('img').width('200')
var res = $('img').height('200')
// 调整宽高可以直接进行加减，无需转换
// 支持运算符的简写
var res = $('img').width('+=100')
// 获取元素的位置:offset(),返回的是一个对象
var res = $('img').offset()
//查询距离左边和顶部的偏移量
var res = $('img').offset().left
var res = $('img').offset().top
//如果元素采用了绝对定位,那么查看它在父级区块中的偏移量: position()
var res = $('img').position().left
var res = $('img').position().top
//在控制台查看运行结果
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
课程总结
通过这节课程我总结了以下的知识点：
1.attr()中为单参数时为获取当前属性值，双参数时为修改当前属性值
2.attr()可以获取到元素的自定义属性
3.removeAttr():删除元素的属性，可以删除多个属性,多个属性之间用空格分开
4.读取样式 css(name),返回的都是字符串类型（例：var res = $('img').css('width')）
5.因为返回的是字符串,所以对于宽高等数据,如果要计算,就必须先转为数值型
（例：var res =parseInt($('img').css('width'), 10)
res += 50
var res = $('img').css('width',res+'px')）
这样的操作是很麻烦，可以直接用width（）和height（）直接操作
var res = $('img').width('+=100')
var res = $('img').height('+=100')
6.获取元素的位置:offset()和查看绝对定位元素的偏移量: position()的用法
（例：var res = $('img').offset().left—查询距离左边的偏移量
var res = $('.box2').position().top—查看它在父级区块中上面的偏移量）
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
