jQuery 基礎トレーニング

jQuery エフェクト

jQuery 操作方法

jQuery 遍历

jQuery Ajax

jQuery 杂项

jQueryのリファレンスマニュアル

jQueryの遍歴メソッド jQueryのHTML/CSSメソッド

jQuery css() 方法

jQueryのHTML/CSSメソッド

css()方法获取或设置所选元素的一个或多个样式属性。

当使用css()方法获取属性值时，它将返回第一个选定元素的值。

使用css()方法设置属性值时，它将为所有选定元素设置一个或多个属性/值对。

同样，jQuery可以同等地解释多词属性的CSS和DOM格式。例如，jQuery可以理解css（“ background-color”）和css（“ backgroundColor”）并返回正确的值。

但是，不完全支持速记简写CSS属性（例如“background”，“margin”和“border”），并且在不同的浏览器中可能会产生不同的结果。

语法：

获取CSS属性值：

$.css(property)

设置CSS属性和值：

$.css(property,　value)

设置多个CSS属性和值：

$.css({property:value,　property:value,　...})

使用函数设置CSS属性和值

$.css(selector, property, function(index, currentValue))

实例

单击获取DIV的背景色：

例

$("div").click(function(){
　　$(this).css("background-color");
});

テストを見て‹/›

设置所有段落的color属性：

例

$("button").click(function(){
　　$("p").css("color",　"blue");
});

テストを見て‹/›

设置多个CSS属性和值：

例

$("button").click(function(){
　　$("p").css({
　　　　"color":　"white",
　　　　"font-size":　"1.3em",
　　　　"background-color":　"#4285f4",
　　　　"padding":　"20px"　　
　　});
});

テストを見て‹/›

获取单击的DIV的宽度，高度，颜色和背景色：

例

$("div").click(function(){
　　let　html　=　["被点击的div具有以下样式:"];
　　let　styleProps　=　$(this).css(["width",　"height",　"color",　"background-color]);
　　$.each(styleProps,　function(prop,　value)　{
　　　　html.push(prop　+　":　"　+　value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

テストを見て‹/›

CSS属性と値を関数を使用して設定する：

例

$("button").click(function(){
　　$("p").css("padding",　function(i,　val){
　　　　return　i　+　25;
　　});
});

テストを見て‹/›

ボタンをクリックしたとき、すべての段落のパディングを増やします（機能を使用して）：

例

$("button").click(function(){
　　$("p").css({
　　　　padding:　function(i,　val){
　　　　　　return　parseFloat(val)　*　1.2;
　　　　}
　　});
});

テストを見て‹/›

引数の値

引数	説明
property	CSS属性の名前を指定します
value	CSS属性の値を指定します
function(index, currentValue)	関数を指定して、CSS属性の値を返します index-要素が集合内のインデックス位置を返します currentValue-現在のCSS属性の値を返します

jQueryのHTML/CSSメソッド

jQueryの遍歴メソッド jQueryのHTML/CSSメソッド