jQuery-css

1.css

 

   /**
         * 1.得到第一个p标签的颜色
         * $('p:first').css('color','red')
         * 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
        })
         */

 

　　

2.位置

 

/**点击btn1
         * 1.打印div1相对于页面左上角的位置
         * 2.打印div2相对于页面左上角的位置
         * 3.打印div1相对于父元素左上角的位置
         * 4.打印div2相对于父元素左上角的位置
         * $('#btn1').click(function () {
            var offset = $('.div1').offset()
            console.log(offset.left,offsetf.top)

            offset = $('.div2').offset()
            console.log(offset.left,offsetf.top)

            var position = $('.div1').position()
            console.log(position.left,position.top)

             position = $('.div2').position()
            console.log(position.left,position.top)
        })
         * 点击btn2
         * 设置div2相对于页面的左上角的位置
         *  $('btn2').click(function () {
            var offset = $('.div2').offset({
                left:50,
                top:100
            })
        })
         */

 

　　

 

3.scroll滚动

-1.scrollTop():读取/设置滚动条的Y坐标

-2.$(document.body).scrollTop()+$(document.documentElement).scrollTop()

读取页面滚动条的Y坐标（兼容chrome和IE）

-3.$('body,html').scrollTop(60);

滚动到指定位置（兼容chrome和IE）

 

/**
         * 1.得到div或页面滚动条的坐标
         $('#btn1').click(function () {
            console.log($('div').scrollTop())
            
            console.log($('html').scrollTop()+$('body').scrollTop())
            
            console.log($(document.documentElement).scrollTop)+$(document.body).scrollTop//兼容IE/chrome
        })
         * 2.div或页面的滚动条滚动到指定位置
         *   $('#btn2').click(function () {
            $('div').scrollTop(200)
            $('html,body').scrollTop(300)
        })
         */

 

4.元素的尺寸

　　1.内容尺寸

　　　　height():height

　　　　width():width

　  2.内部尺寸

　　　　innerHeight():height+padding

　　　　innerWidth():width+padding

　  3.外部尺寸

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

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

 var $div = $('div')
        //1.内容尺寸
        console.log($div.width(),$div.height())//100 150
        //2.内部尺寸
        console.log($div.innerWidth(),$div.innerHeight)//120 170
        //3.外部尺寸
        console.log($div.outerWidth(),$div.outerHeight())//140 190
        console.log($div.outerWidth(true),$div.outerHeight(true))//160 210