js의 박스 모델에 대한 자세한 설명-JS 튜토리얼-php.cn

js의 박스 모델에 대한 자세한 설명

零下一度

풀어 주다： 2017-07-18 16:02:53

원래의

2589명이 탐색했습니다.

1.js 박스 모델

은 js

에서 제공하는 일련의 속성과 메소드를 통해 페이지에 있는 요소의 스타일 정보 값을 얻는 것을 말합니다. 예:

# 상자가 많습니다. 고유한 개인 속성:

<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>

로그인 후 복사

박스 모델에 관해 누구나 가장 먼저 생각할 것은 CSS 박스 모델입니다. JS 박스 모델은 일련의 속성과 메서드를 통해 페이지의 콘텐츠를 얻는 것을 말합니다. JS에서 제공되는 요소의 스타일 정보 값입니다.

#div의 경우(자체 개인 속성이 많음) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype-> ;Object.prototype

다음은 일부 JS 메소드입니다

　1.클라이언트 시리즈(현재 요소의 여러 개인 속성)

　콘텐츠 너비 및 높이: 우리가 설정한 너비/높이 높이의 두 가지 스타일은 콘텐츠의 너비와 높이입니다. 높이 값이 설정되지 않은 경우 컨테이너의 높이는 내부 콘텐츠에 따라 조정되므로 얻은 값은 실제 콘텐츠의 높이입니다. 높이는 콘텐츠의 크기에 관계없이 고정되도록 설정되어 있습니다. 실제로 콘텐츠의 높이는 설정된 값을 나타냅니다.

실제 콘텐츠의 너비와 높이를 의미합니다. (꼭 설정한 높이와 관련이 있는 것은 아닙니다.) 예를 들어 콘텐츠의 경우 높이를 200px로 설정합니다. 실제 콘텐츠 높이는 오버플로 콘텐츠 높이를 추가하는 것입니다

　 clientWidth/clientHeight 콘텐츠 너비/높이 + 왼쪽 및 오른쪽/상하 패딩 (콘텐츠 오버플로와 관련 없음)

　 clientLeft:왼쪽 테두리 너비 clientTop: 상단 테두리 높이(테두리[왼쪽/상단]너비)

　 2, 오프셋 시리즈

th/offsetHeight: clientWidth/clientHeight + 왼쪽 및 오른쪽/위쪽 및 아래쪽 테두리(및 콘텐츠 오버플로 여부 관계 없음)

　offsetParent: 현재 요소의 상위 참조 개체

　offsetLeft /offsetTop: 상위 수준 참조 개체에서 현재 요소의 외부 테두리 거리 내부 테두리의 오프셋

3. 스크롤 시리즈

scrollWidth/scrollHeight: 정확히 동일 clientWidth/clientHeight (제공: 컨테이너의 콘텐츠가 오버플로되지 않음) 컨테이너의 콘텐츠가 오버플로되면 우리가 얻는 결과는 다음과 같습니다: 실제 콘텐츠의 너비(오버플로 포함) + 왼쪽 패딩

scrollHeigh: 실제 콘텐츠의 높이(오버플로 포함) + 상단 패딩

값과 같고, 왜냐하면 동일한 브라우저에서 Overflow="hidden"을 설정했는지 여부가 최종 결과에 영향을 미치기 때문입니다. 다른 브라우저에서 얻은 결과도 다릅니다.

scrollLeft/scrollTop: 스크롤 막대의 너비와 높이

2. JS 박스 모델 속성 값 관련

　　我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；

三、关于操作浏览器本身的盒子模型信息

　　clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

　　scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）

　　我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套

　　document.documentElement[attr] || document.body[attr];

　　必须document.documentElement在前

　　例如document.documentElement.clientWidth || document.body.clientWidth

　　设置也需要写两套

　　编写一个有关于操作浏览器盒子模型的方法，代码如下　

//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

로그인 후 복사

위 내용은 js의 박스 모델에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!