Blogger Information
Blog 36
fans 0
comment 1
visits 28323
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
attr()和css()方法的完整用法
其琛的博客
Original
1127 people have browsed it

代码如下

<!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>

样式如图)[R{${`33V[4JSL3UGOC9{Q.png本次作业学会了attr和prop的添加和移除,在script中添加css样式或内置样式以及快捷设置宽高固定位置等方法


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post