从零玩转jQuery-CSS操作-CSDN博客

jQuery操作CSS样式

css(name|pro|[,val|fn])方法
- 用于设置或获取元素CSS样式
- 格式1:DOM元素.css("样式名称", "值");
- 格式2:DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});

    <script>
        $(function () {
            $("button").click(function () {
                // 1.单个样式设置
//                $("div").css("width", "100px");
//                $("div").css("height", "100px");
//                $("div").css("background", "red");

                // 2.链式设置样式
//                $("div").css("width", "100px").css("height", "100px").css("background", "red");

                // 3.传入对象一次性设置样式
                $("div").css({
                   "width":"100px",
                    "height":"100px",
                    "background":"blue"
                });

                // 4.获取指定样式的值
                console.log($("div").css("width"));
            });
        });
    </script>

jQuery操作元素尺寸

width([val|fn])方法
- 设置或获取元素宽度(相当于获取width属性值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQuery操作位置和尺寸</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 250px;
            height: 250px;
            background-color: red;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取元素宽度(不包括padding和border)
//                alert($('.son').width());
            });
            $("button").eq(1).click(function () {
                // 2.设置元素宽度(不包括padding和border)
//                $(".son").width("50px");
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

height([val|fn])方法
- 设置或获取元素宽度(相当于获取height属性值)
- 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
innerHeight()/innerWidth()
- 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
outerHeight/outerWidth()
- 用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)

jQuery操作元素位置

offset([coordinates])
- 获取或设置元素相对窗口的偏移位

    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取距离窗口的偏移位(从border开始)
                alert($('.son').offset().left); // 100
            });
            $("button").eq(1).click(function () {
                // 2.设置距离窗口的偏移位
                $('.son').offset({left:10, top:10});
            });
        });
    </script>

position()
- 获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离

    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取匹配元素相对父元素的偏移
                alert($('.son').position().left);// 50
            });
            $("button").eq(1).click(function () {
                // 2.无效,不能设置相对定位元素的偏移位
                $('.son').position({left:10, top:10})
            });
        });
    </script>

scrollTop([val])
- 设置或获取匹配元素相对滚动条顶部的偏移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-jQuery操作位置</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            margin-top: 100px;
            margin-left: 100px;
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 7.获取匹配元素相对滚动条顶部的偏移
//                alert($('.scroll').scrollTop());
//                alert($('html').scrollTop());
                // 兼容所有浏览器写法
                alert($('html').scrollTop()+$('body').scrollTop());
            });
            $("button").eq(1).click(function () {
                // 8.设置匹配元素相对滚动条顶部的偏移
//                $('.scroll').scrollTop(100);
//                $('html').scrollTop(100);
                // 兼容所有浏览器写法
                $('html,body').scrollTop(100);
            });
        });
    </script>
</head>
<body>
<div class="scroll">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>