【前端系列教程之jQuery】06_jQuery CSS样式操作

以你之姓@ 2024-04-28 13:12 72阅读 0赞

## 一、CSS样式操作 ##

### CSS ###

#### css(name|pro|\[,val|fn\]) ####

访问匹配元素的样式属性。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

**name** String 要访问的属性名称

**name** Array 一个或多个CSS属性组成的一个数组

**properties** Map 要设置为样式属性的名/值对

**name,value** String, Number 属性名,属性值

**name,function(index, value)** String,Function

1:属性名

2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

### 位置 ###

#### offset(\[coordinates\]) ####

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

**coordinates\{top,left\}** Object

必需。规定以像素计的 top 和 left 坐标。可能的值：

值对，比如 \{top:100,left:0\}

带有 top 和 left 属性的对象

**function(index,coords)** function 规定返回被选元素新偏移坐标的函数。

index - 可选。接受选择器的 index 位置

oldvalue - 可选。接受选择器的当前坐标

#### position() ####

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

#### scrollTop(\[val\]) ####

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

**val** String, Number 设定垂直滚动条值

#### scrollLeft(\[val\]) ####

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

**val** String, Number 设定水平滚动条值

### 尺寸 ###

#### height(\[val|fn\]) ####

取得匹配元素当前计算的高度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

**val** String, Number, Function 设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

**function(index, height)** String, Number, Function 返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

#### width(\[val|fn\]) ####

取得第一个匹配元素当前计算的宽度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

**val** String, Number, Function 设定CSS中 'width' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。

**function(index, height)** String, Number, Function 返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。

#### innerHeight() ####

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

#### innerWidth() ####

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

#### outerHeight(\[options\]) ####

获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

**options** Boolean*默认值:'false'* 设置为 true 时，计算边距在内。

#### outerWidth(\[options\]) ####

获取第一个匹配元素外部宽度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

**options** Boolean*默认值:'false'* 设置为 true 时，计算边距在内。

### 配套代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
        <style>
            #div1 {
                width: 400px;
                height: 400px;
                background: red;
                /* overflow:hidden  可以解决外边距的塌陷 */
                overflow: hidden;
                position: relative;
            }
    
            /* 如果父元素位于浏览器的视口的顶部,当我们给子元素设置了上外边距,那么父元素也会有上边距的效果 */
            #div2 {
                width: 200px;
                height: 200px;
                background: yellow;
                /* margin: 50px 0 0 100px; */
                position: absolute;
                left: 30px;
                top: 50px;
            }
    
            .divx {
                height: 300px;
                width: 300px;
                background: red;
                margin-bottom: 20px;
            }
    
            #div4 {
                width: 200px;
                height: 100px;
                padding: 10px;
                border: 5px solid black;
                margin: 20px;
            }
        </style>
    </head>
    
    <body>
        <div id="div1">
            <div id="div2">
    
            </div>
        </div>
        <div class="divx"></div>
        <div class="divx"></div>
        <div class="divx" id="div3"></div>
        <button id="btn1">点击获取div3的顶部偏移量</button>
        <div id="div4">
    
        </div>
        <script>
            /* 
                JS操作CSS样式:
                    元素节点.style      CSSStyleDeclaration对象
                    元素节点.style.样式属性名   操作标签样式
                        只能获取行内样式的值,但是内部和外部样式值获取不到
                        设置值,会成为行内样式
    
                CSS:
                    css(name|pro|[,val|fn])     获取或设置元素的样式
            */
            // 原生JS获取样式和设置
            /* var div1 = document.getElementById("div1");
            console.log("div1的高度:"+div1.style.height);
            console.log("div1的宽度:"+div1.style.width);
            console.log("div1的背景:"+div1.style.background);
            div1.style.width = "500px";
            div1.style.background = "yellow"; */
    
            // 获取样式值
            console.log("div1的高度:" + $("#div1").css("height"));
            console.log("div1的宽度:" + $("#div1").css("width"));
            // background是复合属性,那么会展示出来一些默认的值
            console.log("div1的背景:" + $("#div1").css("background"));
    
            // 设置样式值
            /* $("#div1").css("height","200px"); 
            $("#div1").css("width","500px");
            $("#div1").css("background","green"); */
    
            /* 
                位置
                    offset()   获取匹配元素在当前视口的相对偏移。返回值:Object
                            返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
                    position()      获取匹配元素相对父元素的偏移。 获取position:absolute的值
                    scrollTop([val])        获取匹配元素相对滚动条顶部的偏移。
                    scrollLeft([val])       获取匹配元素相对滚动条左侧的偏移。
            */
            var offset = $("#div2").offset();
            console.log(offset.left, offset.top);
    
            var position = $("#div2").position();
            console.log(position.left, position.top);
    
            $("#btn1").click(function () {
                var topValue = $(document).scrollTop();
                var interId = setInterval(function () {
                    if (topValue <= 0) {
                        clearInterval(interId)
                        return;
                    } else {
                        topValue -= 20;
                        $(document).scrollTop(topValue);
                    }
                }, 5)
            })
    
    
            /* 
                height([val|fn])        取得或设置匹配元素当前计算的高度值（px）。 
                width([val|fn])         取得第一个匹配或设置元素当前计算的宽度值（px）。
                    height()/width()和css("height")/css("width")区别点在于,前者直接操作数值,后者必须带px单位
                innerHeight()           获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
                innerWidth()            获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
                outerHeight([soptions])     获取第一个匹配元素外部高度（默认包括补白和边框）。
                outerWidth([options])       获取第一个匹配元素外部宽度（默认包括补白和边框）。
                    设置为 true 时，计算外边距在内。
            */
    
            console.log("height:", $("#div4").height());
            console.log("width:", $("#div4").width());
            // $("#div4").height(300);
            console.log("innerHeight:", $("#div4").innerHeight());
            console.log("innerWidth:", $("#div4").innerWidth());
    
            console.log("outerHeight:", $("#div4").outerHeight());
            console.log("outerHeight:", $("#div4").outerWidth());
    
            console.log("outerHeight:", $("#div4").outerHeight(true));
            console.log("outerHeight:", $("#div4").outerWidth(true));
        </script>
    </body>
    
    </html>