- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
获取元素在网页中的位置(Gets the location of the element in the web page)
获取元素在网页中的位置(Gets the location of the element in the web page)
Gets the location of the element in the web page
In making web pages, you sometimes need to know exactly where an element is located on the page.
The following tutorial summarizes Javascripts knowledge of web positioning.
I. The absolute size and relative size of a web page
First of all, we must make clear the two basic concepts.
The full area of a web page is its absolute size. Typically, the absolute size of a web page is determined by the content and the CSS stylesheet.
The relative size of refers to the part of the page to see in the browser window, which is the size of the browser window, also called viewport (I).
The box in the center below represents the browser window, showing only one part of the page at a time.
(Figure 1. Absolute size and relative size of a page)
Obviously, if the content of the page can be displayed in the browser window (that is, no scroll bars), then the absolute size and relative size of the page are equal.
Two, access to the relative size of the web page
Each element on the page has the clientHeight and clientWidth attributes, and you can use them to get the relative size of the page. These two properties represent the size of the elements content section, plus the size of the padding, but does not include the space occupied by the border and scroll bars.
(Figure two. ClientHeight and clientWidth properties)
Therefore, the clientHeight and clientWidth attributes of the document element represent the relative size of the page.
Function, getViewport () {
If (patMode = = BackCompat) {
Return {
Width: document.body.clientWidth,
Height: document.body.clientHeight
}
} else {
Return {
Width: document.documentElement.clientWidth,
Height: document.documentElement.clientHeight
}
}
}
The getViewport function above can return the height and width of the browser window. When using, there are three places that need attention:
1) this function must be loaded after the page is loaded. Oth
您可能关注的文档
- 含麻黄碱类药品的管理制度 和职责(Management systems and duties of ephedrine containing drugs).doc
- 呼吸机参数(Ventilator parameters).doc
- 哈尔滨工业大学数学建模竞赛试题(Harbin Institute of Technology mathematical modeling contest examination questions).doc
- 哈尔滨真正的特色小吃,这里没有豪华饭店,只有最淳朴的特色美食(Harbin real specialty snacks, there is no luxury hotel, only the most simple features gourmet).doc
- 哈尔滨摩天农科兽药有限公司(Harbin skyscraper agricultural animal medicine Co., Ltd.).doc
- 哈工大复试经验(Re examination experience of Harbin Institute of Technology).doc
- 喀地区大型工业污染源查(Large industrial pollution sources in Cameroon).doc
- 嘉兴南湖讲解(South Lake explanation).doc
- 固体基质的分类和选用原则(Classification and selection principle of solid matrix).doc
- 国2003年10月高等教育自学考试大学语文(专)试题(Chinese language examination for higher education self taught Examination in October 2003).doc
- 2025AACR十大热门靶点推荐和解读报告52页.docx
- 财务部管理报表.xlsx
- 高中物理新人教版选修3-1课件第二章恒定电流第7节闭合电路欧姆定律.ppt
- 第三单元知识梳理(课件)-三年级语文下册单元复习(部编版).pptx
- 俄罗斯知识点训练课件-七年级地理下学期人教版(2024).pptx
- 课外古诗词诵读龟虽寿-八年级语文上学期课内课件(统编版).pptx
- 高三语文二轮复习课件第七部分实用类文本阅读7.2.1.ppt
- 高考物理人教版一轮复习课件第4章第3讲圆周运动.ppt
- 高考英语一轮复习课件53Lifeinthefuture.ppt
- 2025-2030衣柜行业风险投资发展分析及投资融资策略研究报告.docx
文档评论(0)