zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    发送带SMTP身份认证的电子邮件
    将class文件打包成可执行文件
    迈入本本一族
    关于Java的一些 工具,类库,框架......
    Java中用Servlet容器实现程序监听
    用JDOM读写XML
    Firefox丰富多彩的插件
    DIV居中——不大不小的问题
    羽绒外套
    pku1469 COURSES
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9456190.html
Copyright © 2011-2022 走看看