jQuery之CSS

style样式

设置css样式/读取css值：

　　css(styleName)：根据样式名得到对应的值。

　　css(styleName, value)：设置一个样式。

　　css({多个样式对})：设置多个样式。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style样式</title>
</head>
<body>

<p style="color: blue;">泰坦的后裔</p>
<p style="color: green;">太阳的后裔</p>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function (){
        /*
         * 需求：
         * 1.得到第一个p标签的颜色
         * 2.设置所有p标签的文本颜色为red
         * 3.设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px),高(30px)
         */
        //1.得到第一个p标签的颜色
        console.log($('p:first').css('color'));
        //2.设置所有p标签的文本颜色为red
        $('p').css('color', 'red');
        //3.设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px),高(30px)
        $('p:eq(1)').css({
            color: '#ff0011',
            background: 'blue',
            width: 300,
            height: 30
        });
    });
</script>
</body>
</html>

位置坐标

获取/设置标签的位置数据：

　　offset()：读/写当前元素坐标(原点是页面左上角)。

　　position()：读当前元素坐标(原点是父元素左上角)。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset和position</title>
    <style type="text/css">
        * {
            margin: 0px;
        }

        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 20px;
            left: 10px;
            background: blue;
        }

        .div2 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background: red;
        }

        .div3 {
            position: absolute;
            top: 250px;
        }
    </style>
</head>
<body style="height: 2000px;">

<div class="div1">
    <div class="div2">测试offset</div>
</div>

<div class='div3'>
    <button id="btn1">读取offset和position</button>
    <button id="btn2">设置offset</button>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function (){
        /*
         * 需求：
         * 1.点击btn1
         *      打印 div1 相对于页面左上角的位置
         *      打印 div2 相对于页面左上角的位置
         *      打印 div1 相对于父元素左上角的位置
         *      打印 div2 相对于父元素左上角的位置
         * 2.点击btn2
         *      设置 div2 相对于页面的左上角的位置
         */
        //读取offset和position
        $('#btn1').click(function () {
            var offset1 = $('.div1').offset();
            console.log(offset1.left, offset1.top);
            var offset2 = $('.div2').offset();
            console.log(offset2.left, offset2.top);

            var position1 = $('.div1').position();
            console.log(position1.left, position1.top);
            var position2 = $('.div2').position();
            console.log(position2.left, position2.top);
        });
        //设置offset
        $('#btn2').click(function () {
            $('.div2').offset({
                left: 20,
                top: 40
            });
        });
    });
</script>
</body>
</html>

元素滚动：

　　scrollTop()/scrollLeft()：读/写元素/页面的滚动条坐标。

　　$(document.body).scrollTop() + $(document.documentElement).scrollTop()：读取页面滚动条的Y坐标(兼容chrome和IE)。

　　$('body,html').scrollTop(60)：滚动到指定位置(兼容chrome和IE)。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素滚动</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置scrollTop</button>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">

    /*
     * 需求：
     * 1.得到div或页面滚动条的坐标
     * 2.让div或页面的滚动条滚动到指定位置
     */
    $(function (){
        //1.得到div或页面滚动条的坐标
        $('#btn1').click(function () {
            console.log($('div').scrollTop());
            console.log($('body').scrollTop() + $('html').scrollTop());
            console.log($(document.body).scrollTop() + $(document.documentElement).scrollTop());
        })

        //2.让div或页面的滚动条滚动到指定位置
        $('#btn2').click(function () {
            $('div').scrollTop(150);
            $('body, html').scrollTop(200);
        });
    });
</script>
</body>
</html>

元素尺寸

内容尺寸（不包括内边距和边框的尺寸）：

　　height()：height

　　width()：width

内部尺寸（包括内边距,但不包括边框的尺寸）：

　　innerHeight()：height+padding

　　innerWidth()：width+padding

外部尺寸（包括内边距和边框的尺寸）：

　　outerHeight(false/true)：height + padding + border，如果是true，加上margin。

　　outerWidth(false/true)：width + padding + border，如果是true，加上margin。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的尺寸</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 150px;
            background: red;
            padding: 10px;
            border: 10px #fbd850 solid;
            margin: 10px;
        }
    </style>
</head>
<body>

<div>div</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function (){
        var $div = $('div');
        //内容尺寸
        console.log($div.width(), $div.height());
        //内部尺寸
        console.log($div.innerWidth(), $div.innerHeight());
        //外部尺寸
        console.log($div.outerWidth(), $div.outerHeight());
        console.log($div.outerWidth(true), $div.outerHeight(true));
    });
</script>
</body>
</html>

刷新页面返回顶部

北冥煮鲲

jQuery之CSS

style样式

位置坐标

元素尺寸

公告