一、jQuery addClass() 方法
向不同的元素添加 class 属性。在添加类时，您也可以选取多个元素
<style> .aa { color:red; }; </style> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <button>给元素添加class属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("aa");//把上面的class属性aa,添加给“h1/h2/p” }); }); </script>
二、jQuery removeClass() 方法
<style> .aa { color:red; }; </style> <body> <h1 class="aa">标题 1</h1> <h2 class="aa">标题 2</h2> <p class="aa">这是一个段落。</p> <button>给元素移除class属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("aa");//给“h1/h2/p”移除aa属性 }); }); </script>
三、jQuery toggleClass() 方法：被选元素进行添加/删除类的切换操作
<style> .aa { color:red; }; </style> <body> <h1 class="aa">标题 1</h1> <h2 class="aa">标题 2</h2> <button>切换</button> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1,h2").toggleClass("aa");//给“h1/h2/p”切换aa属性 }); }); </script>
四、jQuery css() 方法
设置多个 CSS 属性
<body> <p style="background-color:#ff0000">这是一个段落。</p> <button>切换</button> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script>
尺寸：
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。