js进阶 11-3 jquery中css属性如何操作
一、总结
一句话总结：通过css()方法
1、attr和css是有交叉的，比如width，两者中都可以设置，那么他们的区别是什么？
其实通俗一点就是css范围更广
css是样式中的width，attr是属性中的width。
<img src="HTML5.png" alt="" width="100" border="2">
如果image没有设置width属性，attr中取不到，但是css中可以取到其原始宽度
2、css()方法多属性设置，用什么标点符号表示？
逗号，因为逗号表示多 ，multi
3、编程语言中的逗号表示什么？
多，multy，比如多参数，多属性
4、编程语言中键值对的表示有哪几种方式？
css中冒号，php中的=>和逗号，java中的赋值号=，jquery中的冒号
二、jquery中css属性如何操作
1、相关知识
CSS属性操作
- 获取CSS属性值:$().css("属性")
- 设置单个CSS属性:$().css("属性","属性值")
- 设置多个CSS属性:$().css({"属性1":"属性值1","属性2":"属性值2",……})
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
</style>
</style>
</head>
<body>
<img src="HTML5.png" alt="" width="100" border="2">
<img src="HTML5.png" alt="" width="100" border="2">
<img src="HTML5.png" alt="" width="100" border="2">
<input type="button" id="btn1" value="获取">
<input type="button" id="btn2" value="设置1">
<input type="button" id="btn3" value="设置2">
<input type="button" id="btn4" value="删除"> <script>
$(function(){
//获取元素的属性值
$('#btn1').click(function(){
//alert($('img').attr('width'))
alert($('img').css('width'))
})
$('#btn2').click(function(){
//设置单个CSS属性
//$('img').css('width','200')
//设置多个CSS属性
$('img').css({
'border':'solid 5px green',
'opacity':'0.5'
})
}) $('#btn3').click(function(){
$('img').css('width',function(index,value){
alert(parseInt(value))
return parseInt(value) *(index+1)/3+'px'
})
})
$('#btn4').click(function(){
$('img').removeAttr('border width')
}) })
</script>
</body>
</html>