溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQueryCSS操作
1. css()方法
a) 定義和用法：
i. css()方法返回或設置匹配的元素的一個或多個樣式屬性
b) 返回css屬性值：
i. 返回第一個匹配元素的css屬性值
c) 注釋：
i. 當用于返回一個值時，不支持簡寫的css屬性
d) 語法：
i. $(selector).css(name)
1. 解釋：name必需。規定css屬性的名稱。該參數可包含任何css屬性
e) 實例：
i. 取得第一個段落的color樣式屬性的值
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("p").css("color"));
});
});
</script>
</head>
<body>
<p style="color:red">This is a paragraph.</p>
<button type="button">返回段落的顏色</button>
</body>
</html>
2.設置css屬性
f) 設置所有匹配元素的指定css屬性
g) 語法
i. $(selector).css(name,value);
ii. Name:必需，規定css屬性的名稱，該參數可包含任何css屬性
iii. Value:可選，規定css屬性的值，該參數可包含任何css屬性值
h) 實例
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color","red");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改變段落的顏色</button>
</body>
</html>
3.使用函數來設置css屬性
i) 設置所有匹配的元素中樣式屬性的值
j) 此函數返回要設置的屬性值。接受兩個參數，index為元素在對象集合中的索引位置，value是原先的屬性值。
k) 語法：
i. $(selector).css(name,function(index,value))
l) 說明：
i. Name:必需，規定css屬性的名稱。該參數可包含任何css屬性。
ii. Function(index,value)規定返回css屬性新值的函數
1. index:可選，接受選擇器的index位置
2. oldvalue:可選，接受css屬性的當前值
m) 實例1：將所有段落的顏色設為紅色
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color",function(){
return"red";
});
});
});
</script>
</head>
<body>
<p>This is aparagraph.</p>
<p>This is anotherparagraph.</p>
<button>設置所有 p 元素的color 屬性</button>
</body>
</html>
n) 實例2：逐漸增加div的寬度
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) *1.2;}
);
});
});
</script>
<style>
div {width:100px; height:50px; background-color:red;}
</style>
</head>
<body>
<div>請點擊這里</div>
</body>
</html>
4.設置多個css屬性/值對
語法：$(selector).css(property:value,property:value,…)
說明：把“名/值對”對象設置為所有匹配元素的樣式屬性
這是一種在所有匹配的元素上設置大量樣式屬性的最佳方式。
Property:value，必需，規定要設置為樣式屬性的“名稱/值對”對象。該參數可包含若干對css屬性名稱。
實例：
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is anotherparagraph.</p>
<button type="button">改變段落的樣式</button>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
