《教学课件任务2-2漂浮广告相关知识.pptx》由会员分享，可在线阅读，更多相关《教学课件任务2-2漂浮广告相关知识.pptx（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教材配套资源页完整PPT课件教学课件任务2-2漂浮广告相关知识1漂浮广告相关知识2n获取窗口可视区域的宽度和高度n获取页面卷入部分的宽度和高度n获取元素的宽度和高度n获取元素的坐标njQuery中的css()方法3nJavaScript中的做法u使用document.documentElement.clientWidth获取宽度u使用document.documentElement.clientHeight获取高度njQuery中的做法u$(window).width()和$(window).height()4nJavaScript中的做法u使用document.documentElement
2、.scrollLeft获取横向滚动条左侧卷入的宽度u使用document.documentElement.scrollTop获取纵向滚动条顶部卷入的高度njQuery中的做法u第一，使用$(window).scrollLeft()和$(window).scrollTop()获取；u第二，使用$(document).scrollLeft()和$( document).scrollTop()获取；5元素尺寸属性元素尺寸属性说明说明clientWidth获取元素可视部分的宽度，即内容区的width和横向padding取值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域clientHeig
3、ht获取元素可视部分的高度，即内容区的 height和纵向padding 取值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域offsetWidth元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度offsetHeight元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的高度scrollWidth无论元素设置了overflow:visible或者overflow:hidden 或者overflow:auto样式属性，获取的宽度都是包括从元素左填充开始到子元素右边框结束之间的像素数scrollHeigh
4、t当元素设置了overflow:hidden 或者overflow:auto样式属性时，获取的高度包括从元素上填充开始到下填充结束之间的像素数；当元素设置了overflow:visible时，获取的高度包括从元素的上填充开始到子元素的下边距结束之间的像素数6元素尺寸相关的方元素尺寸相关的方法法说明说明width()获取元素内容区的宽度height()获取元素内容区的高度innerWidth()获取的宽度包括内容区的width和左右paddinginnerHeight()获取的高度包括内容区的height和上下paddingouterWidth(false)获取的宽度包括内容区的width、左右
5、padding和左右borderouterHeight(false)获取的宽度包括内容区的height、上下padding和上下borderouterWidth(true)获取的宽度包括内容区的width、左右padding、左右border和左右marginouterHeight(true)获取的宽度包括内容区的height、上下padding、上下border和上下margin7n具体要求如下：u在页面中定义两个类名为divW的div，宽度100像素，高度100像素，填充50像素，边框50像素实线#a66，边距10像素，向左浮动，背景黄色且使用background-clip: conten
6、t-box;样式设置背景只覆盖内容区（这是为了能够清晰的区分运行效果中的内容区和填充区），overflow取值auto，若是内容宽度高度超出100像素，则显示滚动条；类名为divW的div内部有一个类名为divN的div，宽度200像素，高度200像素，边框1像素虚线蓝色，上边距10像素，左右边距10像素，下边距20像素，为divN设置边距的目的是让divN在divW内容区中能够向右向下偏离10像素。u使用jQuery的四组方法分别获取divW的相关宽度和高度并输出。n若将divW的宽度和高度都改为350px，box-sizing改为border-box，结果如何？8nJavaScript中的
7、offsetLeft和offsetTop可用于获取页面元素的位置，使用时有如下三种取值情况。u第一种情况，如果元素A是某个定位元素B的后代元素，无论A的position是static、absolute还是relative，对A使用offsetLeft和offsetTop获取位置时，获取的都是A的左上角顶点到定位祖先元素B的左上角顶点的距离。u此时，若要获取A的左上角顶点到页面左上角顶点的距离，需要计算祖先元素B到页面左上角顶点的距离，在此基础上加上A的offsetLeft和offsetTop取值即可；若要获取A左上角顶点到浏览器窗口左上角顶点的距离，除了可以对A元素直接使用getBoundin
8、gClientRect()方法之外，还可以采用的做法是计算B到浏览器窗口左上角顶点的距离，在此基础上加上A的offsetLeft和offsetTop取值。9nJavaScript中的offsetLeft和offsetTop可用于获取页面元素的位置，使用时有如下三种取值情况。u第二种情况，如果元素A的祖先元素中没有定位的元素存在，无论A的position是static、absolute还是relative，对A使用offsetLeft和offsetTop获取位置时，获取的都是A的左上角顶点到页面左上角顶点的距离，也就是绝对坐标值。u此时，若要获取A的左上角顶点到浏览器窗口左上角顶点的距离，除了可
9、以对A元素直接使用getBoundingClientRect()方法之外，还可以采用的做法是使用A的offsetLeft和offsetTop取值分别减去页面向左卷入的宽度或向上卷入的高度部分（即页面的scrollLeft和scrollTop取值）。10nJavaScript中的offsetLeft和offsetTop可用于获取页面元素的位置，使用时有如下三种取值情况。u第三种情况，如果元素A的定位方式为fixed，无论A位于什么父元素内部，对A使用offsetLeft和offsetTop获取位置时，获取的都是A的左上角顶点到浏览器窗口左上角顶点的距离，也就是相对坐标值。u此时，若要获取A的左上
10、角顶点到页面的左上角顶点的距离，需要使用A的offsetLeft和offsetTop取值分别加上页面向左卷入的宽度或向上卷入的高度部分。11n具体要求如下：u页面中共有5个div，最外层div类名是div，宽660像素，高400像素，填充50像素，背景色#eef；里面有向左浮动的两个div，类名分别是divL和divR，宽度都是300像素，高度200像素，右边距20像素，边框1像素实线蓝色；divR内部有相对定位的div，类名是divM，宽度200像素，高度150像素，背景色为绿色，定位横坐标left取值80像素，纵坐标top取值40像素；divM内部有绝对定位的div，类名是divS，宽度1
11、00像素，高度100像素，边框1像素实线红色，定位横坐标left取值50像素，纵坐标top取值30像素。u使用脚本代码分别获取divR、divM、divS三个div的位置并输出。u获取divS左上角到窗口左上角的距离（页面有无滚动条两种情况）12n思考问题u假设scrollLeft表示页面向左卷入的宽度，div_w_L表示div左上角到窗口左上角的横坐标，div_d_L表示div左上角到页面左上角的横坐标，三者之间有什么关系？13njQuery中获取和设置元素的位置，可以使用的方法有两种uoffset()方法ucss()方法ucss()方法能够获取和设置css样式中所有的样式属性取值14n使用
12、offset()方法返回元素的位置u此时offset()方法不带有参数，返回的结果对象中包含两个整型属性left和top，分别表示指定的jQuery对象到网页左上角的横坐标和纵坐标，坐标值不带有取值单位px。u无论元素本身是否定位，也无论该元素是否是某个定位的祖先元素的后代元素，使用offset()返回的都是元素自身相对于网页的偏移量。n使用offset()方法设置元素的位置u格式：jQuery对象.offset(left: 数字值1, top: 数字值2)u无论元素本身采用任何形式的定位或者没有定位，使用offset()设置的都是元素自身相对于网页的偏移量。15n具体要求如下：u页面中共有5
13、个div，最外层div类名是div，宽660像素，高400像素，填充50像素，背景色#eef；里面有向左浮动的两个div，类名分别是divL和divR，宽度都是300像素，高度200像素，右边距20像素，边框1像素实线蓝色；divR内部有相对定位的div，类名是divM，宽度200像素，高度150像素，背景色为绿色，定位横坐标left取值80像素，纵坐标top取值40像素；divM内部有绝对定位的div，类名是divS，宽度100像素，高度100像素，边框1像素实线红色，定位横坐标left取值50像素，纵坐标top取值30像素。u使用脚本代码分别获取divR、divM、divS三个div的位置
14、并输出。16n使用css()方法返回元素的样式属性取值u若要获取的是大小数据，返回结果是带有单位px的，若是在样式中定义字号时使用的单位是pt，使用css(font-size)获取到的字号大小单位将会自动转换为pxu若是返回的是颜色相关的样式属性的值，则使用rgb()格式表示，例如若color取值为#ff0，则css(color)结果为rgb(255,255,0)。u对于复合的样式属性名称，例如font-size，可以写为css(font-size)或者css(fontSize)。17n使用css(width)方法获取的样式属性取值，一定是在样式表中定义的width取值，且带有单位n使用wid
15、th()方法获取的一定是元素的内容区的宽度n两者的区别在于元素是否设置了box-sizing: border-box; n例如ubodymargin: 10px;u.divWwidth: 350px; height: 350px; padding: 50px; margin: 20px; border: 10px solid #a66; box-sizing: border-box; position:absolute; left:30px; top:30px;ucss(width)与width()结果分别是多少？18n使用css(top)获取的一定是样式中定义的top坐标值n使用offset
16、().top获取的是元素上边距和top取值之和n例如：ubodymargin: 10px;u.divWwidth: 350px; height: 350px; padding: 50px; margin: 20px; border: 10px solid #a66; box-sizing: border-box; position:absolute; left:30px; top:30px;ucss(top)与offset().top结果分别是多少？19n1. 使用两个参数的形式u格式：$(元素).css(样式属性, 取值)u使用这种形式只能设置一个样式属性的取值，而且样式属性名称必须使用引号
17、定界。u例如：$(元素).css(background-color, #f00)。20n此时可以同时设置任意多个样式属性及取值，根据样式属性名称的写法，用法有两种。n第一种用法：$(元素).css(样式属性1: 取值1, 样式属性2: 取值2,.)u样式属性名称完全遵循css样式定义中的属性名称规范，样式属性与取值之间使用冒号间隔，多个属性之间使用逗号间隔，属性和取值都要使用引号定界。u例如：$(元素).css(background-color:#f00, float:left)。n第二种用法：$(元素).css(样式属性1: 取值1, 样式属性2: 取值2,.)u样式属性名称没有使用引号定界，若是复合的样式属性，则必须去掉中间连接符，将原来第二个单词第一个字母写为大写状态。u例如$(元素).css(backgroundColor:#f00, float:left)中backgroundColor的写法。21本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 22