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>
  • 相关阅读:
    spring MVC中定义异常页面
    Spring中bean的范围
    Linux Socket学习域和套接口简介
    MySQL学习字符串属性
    Mybatis注解学习xxxMapper is not known to the MapperRegistry
    eclipse怎样生成javadoc
    java 序列化
    使用Spring的JavaConfig
    SQLBuilder
    Linux 操作
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9456190.html
Copyright © 2011-2022 走看看