【前端系列教程之jQuery】06_jQuery CSS样式操作-蒲公英云

一、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>