首頁 web前端 js教程 jQuery CSS()方法改變現有的CSS樣式表_jquery

jQuery CSS()方法改變現有的CSS樣式表_jquery

May 16, 2016 pm 04:36 PM
css樣式

使用CSS()方法改變現有的CSS樣式表,css()方法在使用上具有多樣性。其中有一種可接受兩個輸入參數:樣式屬性和樣式值,兩者之間用逗號分隔。例如改變連結顏色,可以這樣寫程式碼:

$("#61dh a").css('color','#123456');
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。
//.css(‘color','#123456');表示把颜色设为'#123456'
登入後複製

如果需要改變多個樣式屬性,可先定義屬性變量,然後直接賦值給css()方法。

var mycss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
登入後複製

上述程式碼先定義了一個CSS樣式屬性變數“mycss”,類似於建立一個外部CSS文件,之後再透過css()方法,把屬性賦給ID為'#result'的DIV。
另外jQuery提供的css()方法還可以查看某個元素的css屬性值。 (www.jb51.net 腳本學堂)

例如查看連結的顏色,程式碼如下:

$("#61dh a").css("color")
登入後複製

你會發現,這與第一個範例相似,但這裡只傳遞一個參數(樣式屬性)。
最後要介紹的是如何設定滑鼠劃過後的連結樣式(例如: 顏色),需要用到jQuery事件類別方法 - hover()。值得注意的是,hover()方法需要定義兩個函數,一個是滑鼠劃過時;另一個是滑鼠劃過後。具體方法如下:

$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔
登入後複製

或許聰明的你已經注意到這種方法稱不上簡潔,呵呵,其實jQuery hover()方法不是用來改變CSS樣式的。在實際運用中,建議使用新增/移出CSS的方法來改變滑鼠劃過的連結樣式。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用HTML和CSS建立一個幻燈片佈局頁面 如何使用HTML和CSS建立一個幻燈片佈局頁面 Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS建立幻燈片佈局頁面引言:幻燈片佈局在現代web設計中被廣泛使用,在展示資訊或圖片時具有很大的吸引力和互動性。本文將介紹如何使用HTML和CSS建立幻燈片佈局頁面,並提供具體的程式碼範例。一、HTML佈局結構首先,我們需要建立一個HTML佈局結構,包含一個投影片容器和多個投影片項目。程式碼如下所示:<!DOCTYPEhtml&

如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式 如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式 Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式在CSS中,偽類選擇器是一種強大的工具,可以透過特定的選擇方式來選取HTML文件中的某些元素。其中,:nth-child()是常用的偽類選擇器,可以選擇特定位置的子元素。 :nth-child(n)可以符合HTML中的第n個子元素,而:nth-child(-n)可以符合

如何使用HTML和CSS實作一個簡單的聊天頁面佈局 如何使用HTML和CSS實作一個簡單的聊天頁面佈局 Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS實現一個簡單的聊天頁面佈局隨著現代科技的發展,人們越來越依賴互聯網來進行溝通和交流。而在網頁中,聊天頁面是一種非常常見的佈局需求。本文將向大家介紹如何使用HTML和CSS來實作一個簡單的聊天頁面佈局,並給出具體的程式碼範例。首先,我們需要建立一個HTML文件,可以使用任何文字編輯器。以index.html為例,先建立一個基本的HTML

如何使用HTML和CSS建立響應式卡片牆佈局 如何使用HTML和CSS建立響應式卡片牆佈局 Oct 25, 2023 am 10:42 AM

如何使用HTML和CSS建立一個響應式卡片牆佈局在現代網頁設計中,響應式佈局是一項非常重要的技術。透過使用HTML和CSS,我們可以建立一個響應式的卡片牆佈局,以適應不同螢幕尺寸的裝置。以下將詳細介紹如何使用HTML和CSS建立一個簡單的響應式卡片牆佈局。 HTML部分:首先,我們需要在HTML檔案中設定基本結構。我們可以使用無序列表(<ul>)和

如何使用HTML和CSS實作一個詳細頁面佈局 如何使用HTML和CSS實作一個詳細頁面佈局 Oct 20, 2023 am 09:54 AM

如何使用HTML和CSS實現一個詳細頁面佈局HTML和CSS是創建和設計網頁的基礎技術,透過合理使用這兩者,我們可以實現各種複雜的網頁佈局。本文將介紹如何使用HTML和CSS來實作一個詳細頁面佈局,並提供具體的程式碼範例。在創建HTML結構首先,我們需要建立一個HTML結構來放置我們的頁面內容。以下是一個基本的HTML結構:<!DOCTYPEhtml&g

如何使用HTML和CSS建立響應式影片播放頁面佈局 如何使用HTML和CSS建立響應式影片播放頁面佈局 Oct 18, 2023 am 10:48 AM

如何使用HTML和CSS創建一個響應式影片播放頁面佈局在當今網路時代,影片已經成為我們日常生活中不可或缺的一部分。越來越多的網站和應用程式都提供了影片播放功能。而為了提供更好的使用者體驗,開發人員需要創建一個響應式的影片播放頁面佈局,以適應不同裝置和螢幕尺寸。本文將詳細介紹如何使用HTML和CSS來實現這一目標,並提供具體的程式碼範例。步驟1:HTML結構首先,我

如何使用HTML和CSS建立響應式音樂播放器佈局 如何使用HTML和CSS建立響應式音樂播放器佈局 Oct 19, 2023 am 10:02 AM

如何使用HTML和CSS創建一個響應式音樂播放器佈局在如今資訊科技迅速發展的時代,音樂作為娛樂的一種形式,已經深入人們的生活中。為了更好地體驗音樂,許多網站和應用程式提供了線上音樂播放器。本文將介紹如何使用HTML和CSS建立響應式的音樂播放器佈局,並提供具體的程式碼範例。首先,我們需要使用HTML建立基本結構。以下是一個簡單的HTML佈局範例:<!

HTML嵌入CSS樣式的方法 HTML嵌入CSS樣式的方法 Sep 20, 2023 am 11:37 AM

HTML嵌入CSS樣式的方法有內嵌樣式、內部樣式表、外部樣式表。詳細介紹:1.內嵌樣式是指將CSS樣式直接寫在HTML標籤中,透過style屬性來設定元素的樣式,這種方法的優點是簡單、直觀,能夠快速地為某個特定元素設定樣式,但它的缺點也很明顯,樣式與HTML結構緊密耦合,難以維護與重複使用,同時當樣式需要修改時,需要遍歷整個HTML文檔,效率較低;2、內部樣式表等等。

See all articles