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