jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法分析
本文實(shí)例講述了jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法。分享給大家供大家參考，具體如下：
jquery 幾乎成了現(xiàn)在開(kāi)發(fā)WEB應(yīng)用的標(biāo)準(zhǔn)JS庫(kù)，這與其簡(jiǎn)單性和易用性是分不開(kāi)的。作為一個(gè)后端開(kāi)發(fā)人員，要做一些前端頁(yè)面時(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. 改變超級(jí)鏈接的樣式
2. 給指定的html元素 給一個(gè)指定的CSS 樣式
3. 查看元素的css樣式
4. 隱藏與顯示div或指定的其他html元素
一、改變超級(jí)鏈接的樣式
$("#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對(duì)象（也就是javascript對(duì)象），然后賦值
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頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的下拉菜單導(dǎo)航功能,涉及jQuery針對(duì)頁(yè)面元素的遍歷與節(jié)點(diǎn)修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例
當(dāng)在datagrid行內(nèi)部應(yīng)用添加編輯操作時(shí)，引入combobox是非常方便的操作，這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例，有興趣的可以了解一下。2016-12-12
jquery實(shí)現(xiàn)拖動(dòng)效果（代碼分享）
本文主要分享了jquery實(shí)現(xiàn)拖動(dòng)效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果,涉及jQuery響應(yīng)下拉滾動(dòng)事件動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下2015-12-12
jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例
這篇文章主要介紹了jquery二級(jí)導(dǎo)航下拉菜單，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。2015-02-02
jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解
這篇文章主要介紹了jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
本篇文章主要是對(duì)jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼,通過(guò)jquery鼠標(biāo)click事件操作頁(yè)面元素樣式動(dòng)態(tài)變換實(shí)現(xiàn)手風(fēng)琴折疊效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預(yù)覽
項(xiàng)目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動(dòng)到圖片時(shí)顯示圖片預(yù)覽等等，感興趣的朋友可以參考下2013-01-01