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)
        })
         */

猜你喜欢