016_css()方法
生活随笔
收集整理的這篇文章主要介紹了
016_css()方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. css()方法返回或設(shè)置匹配的元素的一個或多個樣式屬性。
2. 返回CSS屬性值
2.1. 返回第一個匹配元素的CSS屬性值。
2.2. 注釋: 當(dāng)用于返回一個值時, 不支持簡寫的CSS屬性(比如: "background"和"border")。
2.3. 語法
$(selector).css(name)2.4. 參數(shù)
3. 設(shè)置CSS屬性
3.1. 設(shè)置所有匹配元素的指定CSS屬性。
3.2. 語法
$(selector).css(name,value)3.3. 參數(shù)
4. 設(shè)置多個CSS屬性
4.1. 把"名/值對"對象設(shè)置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
4.2. 語法
$(selector).css({property:value, property:value, ...})4.3. 參數(shù)
5. 使用函數(shù)來設(shè)置CSS屬性
5.1. 此函數(shù)返回要設(shè)置的屬性值。接受兩個參數(shù), index為元素在對象集合中的索引位置, value是原先的屬性值。
5.2. 語法
$(selector).css(name,function(index,value))5.3. 參數(shù)
6. 例子
6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>css()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").css('background', 'red');});$('#btn2').click(function(){$("p").css({'width': '400px', 'height': '100px'});});$('#btn3').click(function(){$("#p2").css('background', function(index, value){return 'green';});});$('#btn4').click(function(){$("p").css('height', '');});$('#btn5').click(function(){alert($("p").css('background-color'));});$('#btn6').click(function(){alert($("p").css('background'));});});</script></head><body><p id="p1">css()方法返回或設(shè)置匹配的元素的一個或多個樣式屬性。</p><p id="p2">css()方法返回第一個匹配元素的CSS屬性值。</p><button id="btn1">設(shè)置CSS屬性</button> <button id="btn2">設(shè)置多個CSS屬性</button> <button id="btn3">使用函數(shù)來設(shè)置CSS屬性</button><br /><br /> <button id="btn4">清空height屬性值</button> <button id="btn5">返回background-color屬性值</button> <button id="btn6">返回background屬性值</button> </body> </html>6.2. 運(yùn)行效果圖
6.3. 點擊設(shè)置CSS屬性按鈕
6.4. 點擊設(shè)置多個CSS屬性按鈕
6.5. 點擊使用函數(shù)來設(shè)置CSS屬性按鈕
6.6. 點擊清空height屬性值按鈕
6.7. 點擊返回background-color屬性值按鈕
6.8. 點擊返回background屬性值按鈕
總結(jié)
以上是生活随笔為你收集整理的016_css()方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 015_获取并设置CSS类
- 下一篇： 017_尺寸