3.4.4 操作CSS属性的相关方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 6.7k 阅读时长 ≈ 6 分钟

3.4.4 操作CSS属性的相关方法

jQuery提供了以下操作DOM元素CSS样式的方法,包括:

  • 直接访问、修改DOM元素的class属性。
  • 另外,还提供了访问、修改DOM元素内联CSS属性的方法。
  • 并且还提供了大量直接访问、修改DOM元素大小和位置的方法。

jQuery提供的操作CSS属性的相关方法如下。

操作CSS属性的方法

操作DOM的class属性的方法

下面这些方法是可以操作DOM对象的class属性来控制样式.

方法 描述
addClass(class) 将指定的CSS定义添加到jQuery对象包含的所有DOM对象上。
hasClass(class) 判断该jQuery对象是否包含至少一个具有指定CSS定义的DOM对象。**只要该jQuery对象里有一个DOM对象具有该CSS定义,则返回true,否则返回false**。
removeClass(class) 删除jQuery对象所包含的所有DOM对象上的指定CSS定义。
toggleClass(class) 如果jQuery对象包含的所有DOM对象上具有指定的CSS定义,则删除该CSS定义,否则添加该CSS定义。

css方法

css方法是通过操作内联CSS样式来实现的

获取给定属性名称对应的属性值

方法 描述
css(name) 返回该jQuery对象包含的第一个匹配的DOM对象上名为name的CSS属性值(也就是返回该DOM对象的style.name属性值)。如果在jQuery对象里找到的第一个DOM对象具有style.name属性值,则返回该值,否则返回undefined。

设置属性值

方法 描述
css(name,value) 为jQuery对象包含的所有DOM对象设置单个CSS属性(设置它们的内联CSS属性)。如target.css("border","1px solid black");。
css(properties) 为jQuery对象包含的所有DOM对象同时设置多个CSS属性(设置它们的内联CSS 属性)。properties 是一个形如{key1:value1,key2:value2…}的对象,如{border:"1px solid black"}。

获取相对位置的方法

方法 描述
offset() 获取jQuery对象包含的第一个匹配的DOM对象**相对于该文档的位置**。该方法返回一个形如{left:n,top:m}的对象。
position() 获取jQuery对象包含的第一个匹配的DOM对象**相对于其父元素的位置**。该方法返回一个形如{left:n,top:m}的对象。

获取和设置垂直滚动条的方法

方法 描述
scrollTop() 获取jQuery对象包含的第一个匹配的DOM对象的scroll top值(该属性值会考虑垂直滚动条中滑块的位置)。
scrollTop(value) 设置jQuery对象里包含的所有DOM对象的scroll top值。

获取和设置水平滚动条的方法

方法 描述
scrollLeft() 获取jQuery对象包含的第一个匹配的DOM对象的scroll left值(该属性值会考虑水平滚动条中滑块的位置)。
scrollLeft(value) 设置jQuery对象里包含的所有DOM对象的scroll left值。

获取和设置当前元素的高度和宽度

方法 描述
height() 返回jQuery对象里第一个匹配的元素的当前高度(以px为单位)。
height(value) 设置jQuery对象里所有元素的高度,value的单位为px。
width() 返回jQuery对象里第一个匹配的元素的当前宽度(以px为单位)。
width(value) 设置jQuery对象里所有元素的宽度,val的单位为px。

获取和设置内部高度或外部高度的方法

方法 描述
innerHeight() 返回jQuery对象里第一个匹配的元素的内部高度(以px为单位)。内部高度就是该元素的高度减去边框宽度,再减去垂直padding的大小。
innerWidth() 返回jQuery对象里第一个匹配的元素的内部宽度(以px为单位)。内部宽度就是该元素的宽度减去边框宽度,再减去水平padding的大小。
outerHeight([options]) 获取jQuery对象里第一个匹配元素的外部高度(包括边框宽度和默认的padding大小),该方法对隐藏元素同样有效。如果options为true,则元素的页边距也会算在外部高度之内。
outerWidth([options]) 获取jQuery对象里第一个匹配元素的外部宽度(包括边框宽度和默认的padding大小),该方法对隐藏元素同样有效。如果options为true,则元素的页边距也会算在外部宽度之内。

程序示例

这些操作DOM元素CSS属性的方法简单清晰,而且在前面的程序中也使用了部分操作CSS属性的方法,故此处的示例程序仅示范这里的部分方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 操作CSS属性的工具方法 </title>
    <style type="text/css">
        .test {
            background-color: #ccccff;
            border: 2px dotted red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="test1">
        整体添加CSS样式的元素
    </div>
    <br/>
    <div id="test2">
        采用css(properties)方法添加CSS样式的元素
    </div>
    <br/>
    <div id="test3" style="position:absolute;">
        可以自由移动的元素
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 为id为test1的元素设置class="text"
        $("#test1").addClass("test");

        // 为id为test2的元素设置内联CSS样式
        $("#test2").css({ border: "1px solid black", color: "#888" });
        
        // 获取id为test3的元素
        var target = $("#test3")
            // 设置背景色
            .css("background-color", "#cccccc")
            .css("padding", 10)
            // 设置宽度
            .width(200)
            // 设置高度
            .height(80)
            // 设置位置
            .css("left", 40)
            .css("top", 64);
        // 获取target的位置
        var posi = target.position();
        console.log("target的X座标为:" + posi.left + "\n"
            + "target的Y座标为:" + posi.top);
    </script>
</body>

</html>

创建自定义的CSS属性

jQuery命名空间下还提供了一个jQuery.cssHooks工具方法,该工具方法允许开发者自定义设置CSS样式的代码,从而开发者可以创建自定义的CSS属性。例如在CSS 3规范中允许用户自定义渐变背景,但不同浏览器对渐变背景的支持情况并不相同,此时就可通过jQuery.cssHooks来开发自定义的CSS属性。
jQuery.cssHooks工具方法的用法如下:

1
2
3
4
5
6
7
8
$.cssHooks["customCss"]={
    get: function(elem, computed, extra){
        //实现获取自定义CSS属性值的代码。
    }
    set: function(elem,value){
        //实现设置自定义CSS属性的代码
    }
}

在上面的语法格式中,customCss是自定义的CSS属性名,程序需要分别定义get和set两个函数,分别用于获取自定义的CSS属性值和设置自定义的CSS属性值。

程序示例

下面的程序示范了如何自定义CSS属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 操作CSS属性的工具方法 </title>
</head>

<body>
    <div>疯狂Java讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        (function ($) {
            var _patterns =
                {
                    "msie": "progid:DXImageTransform.Microsoft.Gradient(" +
                        "StartColorStr='{0}', EndColorStr='{1}', GradientType=0)",
                    "mozilla": "-moz-linear-gradient(top, {0} 0%, {1} 100%)",
                    "opera": "-o-linear-gradient(top, {0} 0%, {1} 100%)",
                    "webkit": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)",
                    "unknown": "-ms-linear-gradient(top, {0} 0%, {1} 100%)"
                };
            // 定义一个获取浏览器名称的函数
            var browserName = function () {
                if (/firefox/.test(navigator.userAgent.toLowerCase()))
                    return "mozilla";
                else if (/opera/.test(navigator.userAgent.toLowerCase()))
                    return "opera";
                else if (/webkit/.test(navigator.userAgent.toLowerCase()))
                    return "webkit";
                // 判断是否为早期版本的IE
                else if (/msie/.test(navigator.userAgent.toLowerCase()))
                    return "msie"
                else return "unknown";
            }
            // 定义函数，针对不同浏览器生成CSS属性值
            var genCssString = function (colorStr, browser) {
                // 获取不同浏览器对应的CSS属性值模板
                var reStr = _patterns[browser];
                if (!reStr) return null;
                // 将colors按逗号分隔成两个字符串
                var colors = colorStr.split(',');
                if (colors.length != 2) return;
                // 将{0}占位符替换成colors[0]
                // 将{1}占位符替换成colors[1]
                return reStr.replace(/\{0\}/, colors[0])
                    .replace(/\{1\}/, colors[1]);
            };
            // 注册自定义CSS
            $.cssHooks["lineGradBackground"] =
                {
                    get: function (elem, computed, extra) {
                        return elem.style.background;
                    },
                    set: function (elem, value) {
                        // 获取浏览器版本
                        var b = browserName();
                        // 根据不同浏览器设置不同的background属性值
                        // 对于早期版本的IE浏览器，应该使用filter属性
                        elem.style[b == "msie" ? "filter" : "background"]
                            = genCssString(value, b);
                    }
                };
        })(jQuery);
        $("body>div").width(300)
            .height(40)
            .css("padding", 30);
        // 使用自定义CSS
        $("body>div:first").css("lineGradBackground", "#e2f, #efe");
        $("body>div:last").css("lineGradBackground", "#fff, #111");
    </script>
</body>

</html>