attr()与css()是jQuery中快捷设置属性与样式的方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<style type="text/css">
.box-style {
width: 500px;
height: 450px;
background-color: wheat;
position: relative;
}
.box1-style {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 0;
left: 400px;
}
.box4-style {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 350px;
left: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<img src="../images/tela.jpeg" title="pic">
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// attr()设置属性
$('img').attr('style', 'box-shadow: 5px 5px 5px #888');
// attr()删除属性
$('img').removeAttr('title style');
// addClass()设置类样式
$('.box').addClass('box-style');
$('.box1').addClass('box1-style');
$('.box4').addClass('box4-style');
// css()设置内联样式
$('img').css({
'position': 'absolute',
'top': '100px',
'left': '100px',
'box-shadow': '5px 5px 5px #888',
});
$('.box3').css('position', 'absolute')
.css('top', '350px')
.css('left', '0')
.css('background-color', 'skyblue')
.css('width', '100px')
.css('height', '100px')
// width()快捷设置
$('img').width(300);
$('img').height(250);
var res1 = $('img').offset();
var res2 = $('img').position();
console.log(res1,res2);
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图：
手抄代码：
总结：
用attr()与css()能更加方便的设置属性与样式，使得编程更加灵活，像width()与height()之类的快捷设置方式也能提高效率
