收藏
批改状态：合格
老师批语：
attr（）用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的attr方法</title>
</head>
<body>
<img src="../images/1.jpg" width="200" alt="风景" id="pic">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// attr() 元素属性的和修改,必须传参
// // 获取当前元素的值、
var res = $('#pic').attr('src')
// 设置当前元素的值,双参数设置替换新值
$('#pic').attr('src','../images/2.jpeg')
$('#pic').attr('style','border-radius:50%')
// 直接添加自定义属性
var res = $('#pic').attr('guojia')
// 支持回调函数，设置属性值
$('#pic').attr('width',function(){return 150})
// removeattr()删除元素属性
var res = $('#pic').removeAttr('alt style')
// 控制台输出
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
css()用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的CSS方法</title>
</head>
<body>
<img src="../images/1.jpg" alt="">
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//宽高
var res = $('img').css('width','200')
var res = $('img').css('height','200')
// 边框，圆角
var res = $('img').css('border','1px solid red')
.css('border-radius','50%')
// 获取元素宽高
var res = $('img').css('height')
// 获取后直接修改高度
var res = $('img').height(300)
// offset(),元素和浏览器边框的偏移量
var res =$('img').offset()
var res =$('img').offset().left
// position()
var res = $('img').position()
var res = $('img').position().left+'px'
// 控制台输出
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
手写代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
