本文实例讲述了框架实现获取及设置半铸钢钢性铸铁(铸造半钢)样式操作。分享给大家供大家参考，具体如下：

addClass():向被选元素添加一个或多个类removeClass():从被选元素删除一个或多个类toggleClass():对被选元素进行添加/删除类的切换操作css():设置或返回被选元素的一个或多个样式属性样式表实例：重要{ font-weight : bold；font-size : xx-大号；}.蓝色{ color:blue}

addClass()

！DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).单击(函数(){$('h1，h2，p ').addClass(')蓝色');$(“div”).addClass(')重要');});});/scriptstyle type='text/css ' .重要{ font-weight : bold；font-size : xx-大号；}.蓝色{ color : blue }/style/headly h1她走了/h1 H2没话说了/h2pbut我想你/pdiv你能回来吗/div/brbuttonaddClass/button/body/html运行效果：

可以在addClass()方法中规定多个类：

$("按钮")。click(function(){ $(“# div 1”)).addClass(')重要的蓝色');});

removeClass()

!DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).click(function(){$('h1，h2，p ').removeClass(“”蓝色');});});/scriptstyle type='text/css ' .重要{ font-weight:bold；font-size : xx-大号；}.蓝色{ color : blue }/style/head dyh 1 class=' blue '是她吗？/h1h2类='蓝色'我不知道/h2p class=' blue ' queit/pbrbbutton remove class/button/body/html运行结果：

toggleClass()

!DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).click(function(){$('h1，h2，p ').toggleClass('蓝色');});});/scriptstyle type='text/css ' .蓝色{ color : blue }/style/head dyh 1你是谁/h1h2 i五谢谢/H2 p再见/pbuttontoggleClass/button/body/html运行结果：

css()

返回半铸钢钢性铸铁(铸造半钢)属性

css("propertyname")

!DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).单击(函数(){ alert('背景色=' $(' # p2 ')).css(“”背景色');});});/script/head dyh 2我心在南朝/h2p id=P1风格='底色： # ff 0000 '田野上/PP id=p2 style='底色： # 00ff 00 '红花盛开/PP id=P3风格='底色： # 0000 ff '玲珑剔透/pbuttoncss()/button/body/html运行结果：

设置半铸钢钢性铸铁(铸造半钢)属性

css("propertyname","value");

!DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).单击(函数(){$('p ')).css(“”背景色','黄色');});});/script/head dyh 2我心在南朝/h2p style='底色： # ff 0000 '田野上/PP style='底色： # 00ff 00 '红彤彤的花儿/PP style='底色： # 0000 ff '玲珑剔透/pp我心在南朝/p按钮设置半铸钢钢性铸铁(铸造半钢)属性/按钮/正文/html运行结果：

设置多个半铸钢钢性铸铁(铸造半钢)属性

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery——尺寸

Width():设置或返回元素的宽度(不包括内部边距、边框或外部边距)height():设置或返回元素的内部高度(不包括内部边距、边框或外部边距)。innerWidth()方法返回元素的宽度(包括内部边距)。方法返回元素的宽度(包括内部边距和边框)。outhealth()返回元素的高度(包括内部边距和边框)。outwidth(true)返回元素的高度(包括内边距、边框和外边框)！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('button '))。单击(function(){ var txt=' '；txt=' div :的宽度' $('#div1 ')。width()'/br '；txt=' div :的高度' $('#div1 ')。height()'/br '；txt=' div :的inner width ' $(' # div 1 ')。inner width()'/br '；txt=' div :的inner height ' $(' # div 1 ')。inner height()'/br ' txt=' Outer width : ' $(' # div 1 ')。outer width()'/br ' txt=' Outter height : ' $(' # div 1 ')。outhealth()'/br '；txt='外宽度： ' $('#div1 ')。outer width(true)'/br ' txt=' Outter height : ' $(' # div 1 ')。外部高度(真)；$('#div1 ')。html(txt)；});});/script/head dydiv id=' div 1 ' style=' height :150 px；宽度width:300pxpadding:10pxmargin:3pxborder:1px纯蓝；背景色：浅蓝色；/divbrbutton显示div大小/按钮/正文/html运行结果：

感兴趣的朋友可以使用在线的HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun来测试上面的代码运行效果。

关于jQuery的更多信息，请查看本网站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

希望本文对大家的jQuery程序设计有所帮助。