jQuery CSS样式和尺寸操作

1、操作CSS样式方法css()

1.1、获取:jqobj.css(cssattr);

1.2、逐个设置jqobj.css(cssattr,value);

1.3、链式设置jqobj.css(cssattr1,value1).css(cssattr2,value2);

1.4、批量设置jqobj.css({cssattr1:value1,cssattr2,value2});

1.5、注意点:CSS属性名和属性值均以字符串形式传入,属性值带单位的要带上单位传入。

2、元素宽高

width()、height()

获取:jqobj.width(),jqobj.height(),获取到的值是以px为单位的数值

设置宽度:jqobj.width(30)==jqobj.width("30")==jqobj.width("30px")!=jqobj.width("30pt") 设置高度同理

3、定位偏移量

offset():获取元素距离DOM文档左边界和上边界的偏移量:offset().left、offset().top

设置:offset({left:10,top:20});设置后该元素position属性值被设置为relative; 且left和top属性值被设置为经计算后会满足偏移量的值 offset()方法获取到的是数值,设置时left和top及其属性值可带可不带引号,且属性值不能带单位

position():获取元素距离定位元素的偏移量,即读取css属性的left和top值,只能获取不能设置

4、滚动偏移量

scrollTop()、scrollLeft()

注意点: 为了保证浏览器的兼容,

获取网页滚动偏移位需按照如下写法:$("html,body").scrollTop();

设置网页滚动偏移位需按照如下写法:$("html,body").scrollTop(300);

总结:操作2、3、4点的相关方法时,传参时最好统一格式为不带引号和单位

5、综合案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    <style>
        #box{
            width:800px;
            height:900px;
            position:absolute;
            left:100px;
            top:200px;
            background:pink;
        }
        div{
            width:250px;
            height:30px;
            background:green;
        }
        #box div:nth-of-type(odd){
            background:red;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="box">
    <div id="div1">点我获取并改变宽度</div>
    <div id="div2">点我获取并改变窗口偏移量</div>
    <div id="div3">点我获取最近定位元素偏移量</div>
</div>

<script>
    $(function(){
        $("#div1").click(function(){
            alert($(this).width());
            $(this).width(500);
        });
        
        $("#div2").click(function(){
            alert("left:"+$(this).offset().left+" top:"+$(this).offset().top);
            $(this).offset({left:"300",top:300});
        });
        $("#div3").click(function(){
            alert("left:"+$(this).position().left+" top:"+$(this).offset().top);
        });
        
    });
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/chuanzi/p/9456190.html