收藏
批改状态：合格
老师批语：
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attr使用方法</title>
<style type="text/css">
.one{
border-radius: 50%;
margin: auto;
}
</style>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var one = $('.pic').attr('src')
// attr传回参数
$('.pic').attr('src','../images/k2.png')
// attr为属性赋值
$('.pic').attr('style','border-radius:50%;box-shadow:5px 5px 5px #989898')
// attr为属性添加样式
$('.pic').removeAttr('style')
// 清楚样式
var two=$('.pic').prop('data-one')
// prop无法获取自定义属性
var two=$('.pic').removeProp('title')
// removeprop无法删除原生属性，可以将值设为false
$('#kkk').addClass('one')
// 为图片添加class样式
// $('#kkk').css('box-shadow','3px 3px 3px #989898')
// .css('width','200px')
// 或者
$('#kkk').css({'box-shadow':'3px 3px 3px #989898',
'width':'200px'})
// 为图片直接加内联样式
// $('#kkk').removeClass('one')
// 移除class样式
// $('#kkk').toggleClass('one')
// 自动判断有无样式进行添加移除
$('#kkk').width(300)
$('#kkk').height(300)
// 快捷设置宽高
// console.log(one)
// 控制台输出
})
</script>
</head>
<body>
<img src="../images/k1.jpg" width="200" title="库里" data-one="贼叼">
<img src="../images/k7.jpg" id="kkk">
</body>
</html>样式如图
本次作业学会了attr和prop的添加和移除，在script中添加css样式或内置样式以及快捷设置宽高固定位置等方法
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
