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