获取和设置css属性
.css()方法
jQuery用来获取和设置css属性值的方法
方法：在小括号里指定需要获取哪个属性
如果匹配结果集包含多个元素，这个方法会返回第一个元素的值。
获取第一个ID的文本颜色属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取和设置css属性</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #a{ color: saddlebrown; } </style></head><body> <p id="a">床前明月光</p> <p id="b">疑是地上霜</p> <script>$(function(){ alert($("#a").css('color')); }); </script></body></html>
弹出color属性值。
设置属性值：
设置单个样式，第一个参数写样式名，第二个参数写样式值，中间逗号分隔。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取和设置css属性</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #a{ color: saddlebrown; } </style></head><body> <p id="a">床前明月光</p> <p id="b">疑是地上霜</p> <script>$(function(){ $("#a").css('color','blue'); }); </script></body></html>
注：这个方法会更新所有匹配的元素。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取和设置css属性</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #a{ color: saddlebrown; } </style></head><body> <p id="a">床前明月光</p> <p id="b">疑是地上霜</p> <script>$(function(){ $("#a").css('color','blue'); }); </script></body></html>
如何一次性添加多个样式？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取和设置css属性</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #a{ color: saddlebrown; } </style></head><body> <p id="a">床前明月光</p> <p id="b">疑是地上霜</p> <script> $(function(){ $("p").css( {'font-size':'20px','color':'brown','font-family':'Courier'} ); }); </script></body></html>
总结：
第一，如果要在jQuery中添加多个样式，属性和值要用花括号包裹起来。
第二，属性的名称和值之间用冒号分隔。
第三，每一组值之间用逗号分割（最后一组不需要）
小项目之任务清单：
先写HTML：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的每日清单</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <h1>我的每日清单</h1> <div id="list"> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="not selected">学好数理化</div> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="not selected">给爸爸打电话</div> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="not selected">走遍全天下</div>
</div> <div id="add"> <input type="text" placeholder="+添加任务" id="inputValue"> <input type="button" value="确认添加" id="addButton"> </div></body></html>
添加css样式：
<style> body{ font-size: 20px; background-color:rgb(231, 224, 214); } h1{ text-align: center; } .notSelected{ margin-right: 5px; width: 15px; cursor: pointer; } .selected{ display: none; cursor: pointer; } #list{ width: 400px; margin: 0 auto; } .detail{ border-radius: 10px; padding: 10px; margin:10px; border: 1px solid rgb(190, 184, 184); } #inputValue{ border-radius: 10px; width: 375px; margin:10px; line-height: 40px; outline: none; } #addButton{ border-radius: 8px; color: white; background-color: rgb(104, 104, 196); width: 100px; height: 30px; margin-left:280px; outline: none; } </style>所有的：
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>我的每日清单</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> body{ font-size: 20px; background-color:rgb(231, 224, 214); } h1{ text-align: center; } .notSelected{ margin-right: 5px; width: 15px; cursor: pointer; } .selected{ display: none; cursor: pointer; } #list{ width: 400px; margin: 0 auto; } .detail{ border-radius: 10px; padding: 10px; margin:10px; border: 1px solid rgb(190, 184, 184); } #inputValue{ border-radius: 10px; width: 375px; margin:10px; line-height: 40px; outline: none; } #addButton{ border-radius: 8px; color: white; background-color: rgb(104, 104, 196); width: 100px; height: 30px; margin-left:280px; outline: none; } </style></head><body> <h1>我的每日清单</h1> <div id="list"> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="notSelected"> 学好数理化</div> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="notSelected"> 给爸爸打电话</div> <div class="detail"><img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="notSelected"> 走遍全天下</div> <div id="add"> <input type="text" placeholder=" + 添加任务" id="inputValue"> <input type="button" value="确认添加" id="addButton"> </div> </div> <script> $(function(){ //这个函数表示在点击圆圈的时候，把圆圈图片换成打钩的图片，并把字体变成灰色，中间划上删除线 function line(){ $(".notSelected").on('click',function(){ $(this).attr("src","https://static1.bcjiaoyu.com/70d43381cb948313baa40dabd2e6235c_v.png-200x200"); $(this).parent().css({ "text-decoration":"line-through", "color":"grey" }); }); } //函数写好了要调用才有效果，在这里调用一次是因为要确保已经存在的任务项可以划去 line(); //在确认添加任务的按钮上添加点击事件，这个事件确保把输入的任务添加到任务列表 $("#addButton").on('click',function(){ var value = $("#inputValue").val(); //点击时获取输入框中的内容 var $checkCircle = $('<img src="https://static1.bcjiaoyu.com/f6c85f806f731822dd16c38c3dc3dfce_g.png-202x200" class="notSelected">') //创建空圆圈对象 var $newDiv = $('<div class="detail"></div>').text(value); //创建新div元素，并在其中加上刚刚获取的输入框中的value值 $newDiv = $newDiv.prepend($checkCircle); //在刚才的新div对象前面加上空圆圈 $("#add").before($newDiv); //把加上了空圆圈的新div对象插入到id位add的元素之前，也就是输入框之前 $("#inputValue").val(null); //这一步把输入框中的值清零，方便我们再一次输入任务 line(); //把可以点击圆圈可以划线的函数绑定在这个新元素上，这样子新元素也可以划去了 }); }); </script> </body></html>
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
