收藏
批改状态：合格
老师批语：
一、attr()是典型的集读取器与设置器二合一的方法
1.双参数为获取,第一个是属性名,第二个是要设置的新值
2.attr()的属性值,还支持回调函数
如：$('#pic').attr('width', function(){return 100+50})
二、css()方法与attr()方法很相似,也是自带读到与设置特征
根据参数数量确定要执行的操作,一个参数是读取,二个参数是设置
功能相当于读到或设置当前元素的style属性的值,其实就是内联样式
下面是简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()与css()</title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input value="张三" id='name'>
<div class="box1">
<div class="box2"></div>
</div>
</body>
<script type="text/javascript">
$('#name').attr('value', '李四')
$('div').attr('class', 'box2')
// $('.box2').attr({'width':200,'height':200})错误
// $('.box2').attr({'width':'+=50','height':'+=50',})错误
// var res = $('.box2').css({'width':'+=50','height':'+=50',})
//var res = $('.box2').width('+=100').height('+=100')
//var res = $('.box2').css({'width':200,'height':200})
var res = $('.box2').css('box-shadow', '5px 5px 5px #888')
var res = $('.box2').css('border-radius', '60%')
console.log(res)
</script>
</html>点击 "运行实例" 按钮查看在线实例
attr()主要用于元素标签的属性设置，可回调函数，可设置class
css()可用于设置内联样式。
总体来说attr()是粗调，css()是微调。
新手上路，不足之处，欢迎指正。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
