2.①Jq的css②offset和position③scrollTop()获取滑动④返回元素尺寸width()和height()⑤内部尺寸加inner⑥外部尺寸加outer⑦true就加margin

目录

一：CSS修改

1. 得到第一个p标签的颜色

2. 设置所有p标签的文本颜色为pink

3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

二：offset和positon

①.offset(): 相对页面左上角的坐标   返回一个对象   有left和top两个属性

②.position(): 相对于父元素左上角的坐标  返回一个对象   有left和top两个属性

以上两个方法 返回值都不带单位   以像素计    只对可见元素有效(此处不可见的元素是指 display为none)

​

三.scrollTop()是一个方法,如果不传参,则可以返回元素或页面的滚动条坐标;如果传参,就是设置,设置的参数 就是纯数字  不要写单位 

1. 得到div或页面滚动条的坐标

2. 让div或页面的滚动条滚动到指定位置

获取页面元素时要考虑浏览器内核兼容性

四：返回元素尺寸

1. 内容尺寸    width()和height()：返回当前元素设置的width和height的属性值

console.log($div.width(),$div.height());

2.内部尺寸     innerWidth()和innerHeight()： 内部尺寸是width+paddingLeft+paddingRight

console.log($div.innerWidth(),$div.innerHeight());

3. 外部尺寸不传参      outerWidth()和outerHeight()： 外部尺寸  width+paddingLeft+paddingRight+borderLeft+borderRight;

console.log($div.outerWidth(),$div.outerHeight());

传参：一个布尔值的参数 默认为false  如果传true则在原有基础上增加margin的值

console.log($div.outerWidth(true),$div.outerHeight(true));

---

一：CSS修改

    <p style="color: blue;">王者荣耀的后裔</p>
    <p style="color: green;">太阳的后裔</p>

1. 得到第一个p标签的颜色

        console.log($('p:first').css('color'))          //rgb(0, 0, 255)

2. 设置所有p标签的文本颜色为pink

        $('p').css('color', 'pink')

3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

 $('p:last').css({

            'color': '#ff0011',

            'background-color': 'blue',

            'width': '300px',

            'height': '30px',

        })

二：offset和positon

①.offset(): 相对页面左上角的坐标   返回一个对象   有left和top两个属性

②.position(): 相对于父元素左上角的坐标  返回一个对象   有left和top两个属性

以上两个方法 返回值都不带单位   以像素计    只对可见元素有效(此处不可见的元素是指 display为none)

三.scrollTop()是一个方法,如果不传参,则可以返回元素或页面的滚动条坐标;如果传参,就是设置,设置的参数 就是纯数字  不要写单位 

1. 得到div或页面滚动条的坐标

2. 让div或页面的滚动条滚动到指定位置

获取页面元素时要考虑浏览器内核兼容性

四：返回元素尺寸

1. 内容尺寸    width()和height()：返回当前元素设置的width和height的属性值

console.log($div.width(),$div.height());

2.内部尺寸     innerWidth()和innerHeight()： 内部尺寸是width+paddingLeft+paddingRight

console.log($div.innerWidth(),$div.innerHeight());

3. 外部尺寸不传参      outerWidth()和outerHeight()： 外部尺寸  width+paddingLeft+paddingRight+borderLeft+borderRight;

console.log($div.outerWidth(),$div.outerHeight());

传参：一个布尔值的参数 默认为false  如果传true则在原有基础上增加margin的值

console.log($div.outerWidth(true),$div.outerHeight(true));