收藏
批改状态：合格
老师批语：
4.4-读取器及设置器用法CSS（），attr()
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.4-读取器与设置器以及常用的快捷操作方法</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.aa{border-radius:50%}
.bb{box-shadow:5px 5px 5px brown}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" width=200px alt="girl" id="mv" data-a ="超美"><br>
<img src="images/6.jpg" id="pic2"><br>
1.attr(); 典型的获取器和设置器合二为一. 当传入一个参数时为读取器,当传入第二个参数时为设置器.<br>
图片原始宽度为200px,$('img').attr('width')执行后,可以通过console.log(a) 来查看获取的到值为200,<br>
我们再通过$('img').attr('width',400)执行后,可以看到图片的宽度变为400像素了.说明可以传入第二个参数来设置其属性值.<br>
我们再通过$('img').attr('alt','这是一个美女')执行后,原图片的alt标签内容被改变了!<br>
我们还是以在attr()中,读取及设置img的.src,title.等.<br>
还能设置内联样式,如果div块变了圆角和背景变成wheat色,说明执行成功.<br>
2.删除元素属于,上一节课其实已经讲过了.<br>
$('div').removeAttr('style') //执行后,页面的div元素的style中的所有属性被清空!<br>
也可以删除 alt title id等,多个同时删,用空格分开.<br>
3.类元素样式添加,上节课也讲过了. 例:$('img').addClass('aa bb') //为 img元素增加 aa 和 bb样式.变成圆和阴影就说明成功了.!<br>
有添加肯定也有删除类样式了. 例:$('img').removeClass('aa bb') //将上一步添加的类样式清除.
4.自动切换样式: 例:$('img').toggleClass('aa bb') 若元素中没有这两个样式,就添加, 有则清除这两个样式//
5.css();跟Attr()一样,是获取和设置为一体的. CSS()是用来获取和设置style样式的.而Attr()是用来控制标签属性的<br>
例:$('#pic2').css('width',150).css('border-radius','20%').css('box-shadow','2px 2px 9px blue') 此为链式操作.<br>
例:简写: $('#pic2').css({"width":"55px","border-radius","40%"}) 用逗号分隔!<br>
6.width()快捷方法: 例: $('#pic2').width() //获取当前元素的宽度.如果width(300)中设定值,就是将宽度修改为300px<br>
7.offset() 获取当前元素在页面的位置. 例:$('#pic2').offset() 或 $('#pic2').offset().left
8.position 获取当前元素在父级元素中的位置.$('#pic2').position() 或 $('#pic2').position().left
</div>
<script type="text/javascript">
var a = $('img').attr('data-a')
$('img').attr('width',400)
$('img').attr('alt','这是一个美女')
$('div').attr('style','border-radius:10px;background-color:wheat;border:1px solid red;width:650px')
$('img').addClass('aa bb')
$('#pic2').css('width',150).css('border-radius','20%').css('box-shadow','2px 2px 9px blue')
$('#pic2').css({"width":"55px", "border-radius":"40%"})
var a = $('#pic2').offset().left
console.log(a)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码效果图如下：
手写作业如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
