jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法分析
本文實(shí)例講述了jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法。分享給大家供大家參考,具體如下:
jquery 幾乎成了現(xiàn)在開發(fā)WEB應(yīng)用的標(biāo)準(zhǔn)JS庫,這與其簡單性和易用性是分不開的。作為一個(gè)后端開發(fā)人員,要做一些前端頁面時(shí),CSS 樣式的控制是少不了需要掌握的。如果是靜態(tài)的CSS,當(dāng)然是可以直接寫上去的,但有些界面是需要一些動(dòng)態(tài)效果的,比如顏色變化,字體大小變化,甚至DIV 的隱藏于現(xiàn)實(shí)等,這些都需要用javascript 動(dòng)態(tài)控制其CSS樣式,下面就常用的jquery 控制 css 樣式的方法做一個(gè)小結(jié).
1. 改變超級鏈接的樣式
2. 給指定的html元素 給一個(gè)指定的CSS 樣式
3. 查看元素的css樣式
4. 隱藏與顯示div或指定的其他html元素
一、改變超級鏈接的樣式
$("#mylink a").css('color','#111111'); //這里選擇器‘$("#mylink a")'表示ID為'#mylink'的元素下的所有鏈接。 //.css(‘color','#111111');表示把顏色設(shè)為'#111111'
二、給指定的html元素指定一個(gè)已經(jīng)定義好的CSS 樣式
1. 你可以在外部css文件中建立一個(gè)css樣式,比如
.mystyle{width:200px;height:100px;}
然后用jquery 賦值
$("#result").css(mystyle);
2. 可以定義一個(gè)css對象(也就是javascript對象),然后賦值
var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss);
這種方式類似于外部鏈接方式,個(gè)人推薦外部鏈接方式.
三、查看元素的CSS樣式
var mycolor=$("#mylink a").css("color"); if ($('#mydiv').css('display')=="none"){...} //和第一個(gè)例子相似,但是這里我們只傳遞一個(gè)參數(shù)(樣式屬性)
四、隱藏于顯示div或其他元素
1.直接修改CSS方式
$('#mydiv').attr('style','display:none;');//隱藏 $('#mydiv').attr('style','display:block;');//顯示
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery web 組件 后臺日歷價(jià)格、庫存設(shè)置的代碼
這篇文章主要介紹了jQuery web 組件 后臺日歷價(jià)格、庫存設(shè)置的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10jquery實(shí)現(xiàn)多條件篩選特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架,可以“實(shí)現(xiàn)”圖片延遲加載的插件2013-08-08jQuery為動(dòng)態(tài)生成的select元素添加事件的方法
下面小編就為大家?guī)硪黄猨Query為動(dòng)態(tài)生成的select元素添加事件的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JQuery勾選指定name的復(fù)選框集合并顯示的方法
這篇文章主要介紹了JQuery勾選指定name的復(fù)選框集合并顯示的方法,涉及jQuery表單元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
jquery圖片特效制作仿騰訊QQ商城首頁banner焦點(diǎn)圖片輪播切換效果,帶索引按鈕控制和左右按鈕控制圖片切換,實(shí)例代碼如下,感興趣的朋友可以參考下哈2013-06-06jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jquery 重寫 ajax提交并判斷權(quán)限后 使用load方法報(bào)錯(cuò)解決方法
這篇文章主要介紹了jquery 重寫 ajax提交并判斷權(quán)限后 使用load方法報(bào)錯(cuò)解決方法 的相關(guān)資料,需要的朋友可以參考下2016-01-01