Jquery 操作类

write by 2019/6/14 23:58

1. 介绍¶

Jquery的css() 方法设置或返回被选元素的一个或多个样式属性。

2. 获取值¶

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #darkgrey {
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="red">这是一个段落。</p>
<p id="green">这是一个段落。</p>
<p id="darkgrey">这是一个段落。</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
    $(function () {
        $('#btn1').click(function () {
            console.log("背景颜色是: "+$("#red").css("background-color"))
        });
        $('#btn2').click(function () {
            console.log("背景颜色是: "+$("#green").css("background-color"))
        });
        $('#btn3').click(function () {
            console.log("背景颜色是: "+$("#darkgrey").css("background-color"))
        });
    })
</script>
</html>

3. 设置值¶

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

以下是我将所有p标签的背景颜色设置为黄色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #darkgrey {
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="red">这是一个段落。</p>
<p id="green">这是一个段落。</p>
<p id="darkgrey">这是一个段落。</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
    $(function () {
        $('#btn1').click(function () {
            $("#red").css("background-color",'yellow')
        });
        $('#btn2').click(function () {
            $("#green").css("background-color",'yellow')
        });
        $('#btn3').click(function () {
            $("#darkgrey").css("background-color",'yellow')
        });
    })
</script>
</html>

4. 批量设置¶

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #darkgrey {
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="red">这是一个段落。</p>
<p id="green">这是一个段落。</p>
<p id="darkgrey">这是一个段落。</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
    $(function () {
        $('#btn1').click(function () {
            $("#red").css({"background-color":'yellow','font-size':'200%'})
        });
        $('#btn2').click(function () {
            $("#green").css({"background-color":'yellow','font-size':'200%'})
        });
        $('#btn3').click(function () {
            $("#darkgrey").css({"background-color":'yellow','font-size':'200%'})
        });
    })
</script>
</html>