收藏
批改状态：合格
老师批语：
jQuery attr方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery attr</title>
</head>
<body>
<img src="./img/view.jpg" alt="view" title="风景" width="300" >
</body>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 获取固有属性
var attr=$('img').attr('alt')
// 设置固有属性
var attr=$('img').attr('width',400)
var attr=$('img').attr('style','border-radius:50%;box-shadow:3px 3px 3px #888')
var attr=$('img').attr('width',function(){ return 400-200})
// 设置自定义属性
var size=$('img').attr('data-size')
$('img').removeAttr('style')
console.log(attr)
</script>
</html>点击 "运行实例" 按钮查看在线实例
jquery css 方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery css 方法</title>
</head>
<body>
<img src="./img/freeze.jpg" alt="freeze" title="云">
</body>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var attr=$('img').css('width',200)
var attr=$('img').css('border-radius','20%')
var attr=$('img').css('box-shadow','3px 3px 3px #66997B')
// 合并写法
var attr=$('img').css({
'width':'200',
'border-radius':'20%',
'box-shadow':'3px 3px 3px #66997B'
})
var res=$('img').css('box-shadow')
// 宽，高
var attr=$('img').width(300)
var attr=$('img').width()
var attr=$('img').height(300)
var attr=$('img').height()
var res=$('img').offset()
// left,top 属性
var res=$('img').offset().left
var res=$('img').offset().top
// 绝对定位
var res=$('img').position().left
var res=$('img').position().top
var res=$('img').scrollLeft()
var res=$('img').scrollTop()
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
jquery attr 方法可以获取标签的固有属性和自定义属性，同时也可以设置固有，自定义属性。自定义属性设置时加data-前缀，获取标签中的data-XX属性不需要加前缀。
jquery css 方法设置属性，可以将多个css属性写在一起。获取宽高时用heigh(),wid替换（）方法，更便捷。
手抄：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
