jQuery CSS()方法改變CSS樣式，jquerycss

最後更新：2014-08-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery入門執行個體：使用CSS()方法改變現有的CSS樣式表，css()方法在使用上具有多樣性。其中有一種可接受兩個輸入參數：樣式屬性和樣式值，兩者之間用逗號分隔。比如要改變連結顏色，可以這樣編寫代碼：

.代碼

$("#61dh a").css('color','#123456');
//選取器‘$("#61dh a")’表示ID為‘#61dh’的元素下的所有連結。
//.css(‘color’,'#123456');表示把顏色設為'#123456'

如果需要改變多個樣式屬性，可先定義屬性變數，然後直接賦值給css()方法。樣本如下：ui架構分享

.代碼

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屬性值。例如查看連結的顏色，代碼如下：

.代碼

$("#61dh a").css("color")

你會發現，這與第一個例子相似，但是這裡只傳遞一個參數(樣式屬性)。

最後要介紹的是如何設定滑鼠划過後的連結樣式(比如: 顏色)，需要用到jQuery事件類別方法 - hover()。值得注意的是，hover()方法需要定義兩個函數，一個是滑鼠划過時；另一個是滑鼠划過後。具體方法如下： ui架構分享

.代碼

$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的兩個函數使用用逗號分隔

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

jquery 改變css樣式，怎實現

在html裡面加上下面一段：
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
$(".home").click(function(){
$(this).addClass ("home_hover").removeClass("home");
})
})
</script >

下面的jQuery代碼應怎解除css樣式？懂行的進!

正規寫法是把這個css樣式在CSS裡設定成一個class。然後用jquery addClass() removeClass().
一般大規模的css樣式修改不要寫在js代碼裡。有利於CSS代碼的集中和複用。試想一下如果你在js裡設定了很多這種css樣式代碼，某天你忽然覺得顏色要改一下，那麼既難找，全部修改工作量又大。
<script type="text/javascript" src="ajax.googleapis.com/...min.js"></script>
<style>
.p_style{
color:white;
background-color:#98bf21;
font-family:Arial;
font-size:20px;
padding:5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btn01").click(function(){
$("p").addClass("p_style")
});
$("#btn02").click(function(){
//$("p").unbind(".css");
$("p").removeClass("p_style");
});
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn01" type="button">改變段落的樣式</button>
<button id="btn02" type="button">恢複段落的樣式</button>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery CSS()方法改變CSS樣式，jquerycss

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support