JQuery 入门指南(5):CSS操作
2014-01-16 23:19
369 查看
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个CSS •removeClass() - 从被选元素删除一个或多个CSS •
toggleClass() - 对被选元素进行添加/删除CSS的切换操作
css() - 设置或返回样式属性 •
jQuery 拥有若干进行 CSS 操作的方法。我们将通过下面的例子进行学习部分操作:
<html> <head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(document).ready(function(){ $("#allCssForEachElement").click(function(){ $("#import").addClass("important"); $("#blue").addClass("blue"); }); $("#allMultiCssForOneElement").click(function(){ $("#import").addClass("important blue"); }); $("#RemoveCssForOneElement").click(function(){ $("#import").removeClass("blue"); }); $("#ToggleCssForOneElement").click(function(){ $("#import").toggleClass("blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <p id="import">Important Text for operator CSS</p> <p id="blue">Blue Text for operator CSS</p> <br> <button id="allCssForEachElement">allCssForEachElement</button> <button id="allMultiCssForOneElement">allMultiCssIntoImport</button> <button id="RemoveCssForOneElement">RemoveBlueCssFromImport</button> <button id="ToggleCssForOneElement">ToggleBlueCssFromImport</button> </body> </html>
css()
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:css("propertyname");
设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:css("propertyname","value");
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:css({"propertyname":"value","propertyname":"value",...});
相关文章推荐
- JQuery 入门指南(3):DOM对象及其属性的操作
- jQuery快速入门基础教程之jQuery操作CSS(五)
- [置顶] Jquery入门指南教程
- (2)入门指南——(8)原始的js代码和jquery对比(Plain JavaScript vs. jQuery)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- 前端入门10个css bug顺口溜(转自www.jqueryba.com)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery 参考手册 - CSS 操作
- jQuery入门指南教程
- 3.2.12: jQuery的DOM操作之CSS-DOM操作
- 转】Spark DataFrames入门指南:创建和操作DataFrame
- (四)jQuery css操作
- jQuery快速入门基础教程之jQuery操作DOM(四)
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- jQuery入门指南教程
- jQuery修改操作css属性实现方法
- 打杂之WEB前端(二) jQuery 操作DOM总结,DOM Html操作,DOM Css操作
- (2)入门指南——(5)下载jquery(Downloading jQuery)
- jQuery中文入门指南
- jQuery入门指南教程