이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 창 개체의 일반적인 이벤트, JavaScript 실행 메커니즘 등을 포함하여 BOM 작업과 관련된 문제를 소개합니다. 모두에게 도움이 되기를 바랍니다.
【관련 권장사항: javascript 비디오 튜토리얼, web front-end】
윈도우 로딩 이벤트:
창 크기 조정 이벤트:
window.open() 메소드는 지정된 URL로 이동하거나 새 브라우저 창을 여는 데 사용할 수 있습니다.
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
Timer:
window.scroll(x, y)
window.scrollTo(x, y): 둘은 가로 및 세로 스크롤 막대의 위치를 변경하는 데 동일한 사용법입니다. 페이지에 스크롤바가 있습니다
window.scrollBy(x, y) : 스크롤바의 누적 스크롤, 양수는 아래로, 음수는 위로 window.scrollBy(0, 10) : 호출될 때 100밀리초마다 스크롤 막대가 10픽셀씩 이동합니다.
window.getCompulatedStyle(elem, pseudo class)
Dialog
js 스크립트를 실행하고 js 코드를 동기 실행의 실행 스택에 넣습니다. 모드 및 실행 스택 중에 비동기적으로 JS가 발생합니다. 코드(이벤트, 타이머, ajax, 리소스 로딩, 오류)는 웹 API(작업 대기열)에 저장됩니다. 실행 스택의 코드가 완료된 후 작업 대기열로 이동하여 가져옵니다. 실행 후 작업 대기열에서 하나를 가져와 실행하고 작업 대기열의 실행이 완료될 때까지 반복적으로 실행(이벤트 루프)합니다.
window.history를 사용하여 가져옵니다. 현재 페이지의 주소 URL을 입력하고 브라우저를 새 페이지로 리디렉션
http://www.itcast.cn:80/index.html?name=andy&age=1#link http:通信协议 www.itcast.cn:域名80:端口 index.html:路径?name=andy&age=1:参数 #link 片段:锚点、链接
개체 속성:
객체 메서드:
navigator: 브라우저 구성 정보를 캡슐화하는 개체
window.history 对象包括浏览器的历史(url)集合
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768
可以动态得到该元素的位置(偏移)、大小等
offset系列常用属性:
动态获取元素的边框大小、元素大小等
常用属性:
动态获取元素的大小、滚动距离
常用属性
滚动条在滚动的时候会触发onscroll事件
window.pageXOffset/pageYOffset
IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱,用时取两个值相加,因为不可能存在两个值同时有值 封装兼容性方法,求滚动条滚轮滚动距离getScrollOffet()
/* 封装一个获取滚动条的滚动距离 返回:x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离 */function getScrollOffet(){ if(window.pageXOffset){ return {//对象的{}一定要在关键字后,否则系统会自动加上; 则返回值会是undefined x : window.pageXOffset, y : window.pageYOffset } }else{//兼容IE8以及以下 return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } }}
window.innerWidth/innerHeight
IE8及IE8以下不兼容(注意:这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight
标准模式下,任意浏览器都兼容 document.body.clientWidth/clientHeight
适用于怪异某事下的浏览器 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸 返回值: w :视口的宽度 h : 视口的高度 */function getViewportOffset(){ if(window.innerWidth){ return { w : window.innerWidth, h : window.innerHeight } }else{ //兼容IE8以及以下的浏览器 if(document.compatMode == 'BackCompat'){ //怪异渲染模式下 return { w : document.body.clientWidth, h : document.body.clientHeight } }else{ // 标准模式 return { w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } }}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式
domElement.getBoundingClientRect()
兼容性很好;返回一个对象,该对象中有left、top、right、bottom等属性,left、top代表元素左上角的X和Y坐标, right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){ // 支持 BoundingClientRect()方法 if(0 && target.getBoundingClientRect){ var pos = target.getBoundingClientRect(); return { // 涉及到滚动条有移动的情况下 加上滚动条的位置 x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft), y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop) } } else { var pos = { left : 0, top : 0 } var _elm = target; while(target.offsetParent){ if(_elm == target){//首次累加left 和 top pos.left += target.offsetLeft; pos.top += target.offsetTop; }else{ pos.left += target.offsetLeft + target.clientLeft; pos.top += target.offsetTop + target.clientTop; } // target 重新赋值 target = target.offsetParent; } return { x : pos.left, y : pos.top} }}
状态栏
窗口位置
기타 속성
[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]
위 내용은 JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!