웹 프론트엔드 JS 튜토리얼 jquery BS,대화 상자 제어 적응형 size_jquery

jquery BS,대화 상자 제어 적응형 size_jquery

May 16, 2016 pm 06:50 PM
dialog jquery

스타일이 좀 못생겨서 다시 만들었습니다. 그런데 완성해 보니 IE에서 제대로 작동하지 않고 적응형 크기를 구현할 수 없었습니다.

알고보니 xhtml이 필요한데, 회사 제품은 html이네요. 이를 위해 적응형 크기 구현에 대해 연구했습니다.

저는 항상 jquery가 너비와 높이를 얻는 데 매우 마술적이라고 생각했습니다. 요소가 DOM에 삽입되면 offsetWidth/offsetHeight 및 기타 요소 속성을 직접 가져오는 것으로 나타났습니다. dom을 사용하면 브라우저는 규칙에 따라 해당 속성을 계산합니다.

scrollWidth는 가장자리 너비를 제외한 개체의 실제 콘텐츠 너비이며, 개체의 콘텐츠 양에 따라 변경됩니다(콘텐츠가 너무 많으면 개체의 실제 너비가 변경될 수 있음).

clientWidth는 스크롤 막대 및 기타 가장자리를 제외한 개체의 표시 너비이며 창의 표시 크기에 따라 변경됩니다.

offsetWidth는 스크롤 막대 및 기타 가장자리를 포함하여 개체의 표시되는 너비이며 창의 표시 크기에 따라 변경됩니다.

clientWidth, offsetWidth, clientHeight.. 차이점



IE6.0, FF1.06:
clientWidth = 너비 패딩
clientHeight = 높이 패딩
offsetWidth = 너비 패딩 테두리
offsetHeight = 높이 패딩 테두리
IE5.0/5.5:
clientWidth = 너비 - 테두리
clientHeight = 높이 - 테두리
offsetWidth = 너비
offsetHeight = height
(언급해야 합니다: CSS의 margin 속성은 clientWidth, offsetWidth, clientHeight 및 offsetHeight와 아무 관련이 없습니다.)

offsetwidth: 상위 요소를 기준으로 한 요소의 오프셋 너비입니다. . 테두리 패딩 너비와 동일
clientwidth: 요소의 표시 너비입니다. 패딩 너비와 동일
scrollwidth: 요소의 너비이며 스크롤 부분을 포함합니다.

구현할 수 없는 이유를 조사했습니다. jquery.alerts 컨트롤은 div로 가득 차 있는 것으로 나타났습니다. IE의 간단한 HTML에서는 내부 내용에 따라 div의 너비가 이만큼 커지는 것 같습니다. 물론 XHTML의 경우 offsetWidth로 충분합니다.

EXT의 구현을 살펴보면 내부 콘텐츠가 콘텐츠 크기에 따라 변경되는 범위 및 기타 el을 사용하는 방식으로 오프셋 속성을 얻은 다음 각 항목의 너비를 얻는 것이 훨씬 더 똑똑합니다. 내부 el은 패딩과 테두리를 포함하여 외부 레이어의 전체 너비를 계산하는 추가입니다.

저도 간단하게 xhtml을 사용하고 싶지만 다른 방법이 없습니다. EXT를 배우는 것이 더 번거롭지만 신뢰할 수 있습니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

jQuery를 사용하여 모든 태그의 텍스트 내용 수정

심층 분석: jQuery의 장점과 단점 심층 분석: jQuery의 장점과 단점 Feb 27, 2024 pm 05:18 PM

심층 분석: jQuery의 장점과 단점

jQuery에서 eq의 역할 및 적용 시나리오 이해 jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery에서 eq의 역할 및 적용 시나리오 이해

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요?

See all articles