요소가 있고 세로 스크롤 막대가없는 너비가 필요합니다.
Firebug는 몸 너비가 1280px라고 말합니다.
다음 중 하나는 Firefox에서 잘 작동합니다.
console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );
$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );
그들은 모두 내가 찾고있는 값인 1263px를 반환 합니다.
그러나 다른 모든 브라우저는 1280px를 제공합니다 .
(!) 세로 스크롤바없이 전체 화면 너비를 얻는 크로스 브라우저 방법이 있습니까?
답변
.prop("clientWidth")
과 .prop("scrollWidth")
var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width
에서 자바 스크립트 :
var actualInnerWidth = document.body.clientWidth; // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth; // El. width minus scrollbar width
추신 :scrollWidth
안정적 으로 사용하려면 요소가 수평으로 오버플로되지 않아야합니다.
당신은 또한 사용할 수 .innerWidth()
있지만 이것은 요소 에서만 작동합니다body
var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
답변
간단히 다음과 같이 작성하여 바닐라 자바 스크립트를 사용할 수 있습니다.
var width = el.clientWidth;
이를 사용하여 다음과 같이 문서의 너비를 가져올 수도 있습니다.
var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
출처 : MDN
다음과 같이 스크롤바를 포함한 전체 창의 너비를 가져올 수도 있습니다.
var fullWidth = window.innerWidth;
그러나 이것은 모든 브라우저에서 지원되지 않으므로 폴백 docWidth
으로 위와 같이 사용 하고 스크롤바 너비 에 추가하는 것이 좋습니다.
출처 : MDN
답변
여기에 가정 몇 가지 예입니다 $element
A는 jQuery
요소 :
// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case
// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth
// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar
답변
이 시도 :
$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar
이 코드를 사용하여 스크롤 막대를 사용하거나 사용하지 않고 화면 너비를 얻을 수 있습니다. 여기에서 오버플로 값을 변경하고 body
스크롤 막대를 사용하거나 사용하지 않고 너비를 얻습니다.
답변
스크롤바없이 정확한 너비와 높이를 얻을 수있는 가장 안전한 곳은 HTML 요소입니다. 이 시도:
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
브라우저 지원은 꽤 괜찮은데, IE 9 이상이이를 지원합니다. OLD IE의 경우 여기에 언급 된 여러 대체 방법 중 하나를 사용하십시오.
답변
나는 비슷한 문제를 경험했고 width:100%;
나를 위해 해결했습니다. 나는이 질문에 대한 답을 시도하고의 본질이 <iframe>
복잡한 기능을 사용하지 않고도 이러한 자바 스크립트 측정 도구를 부정확하게 만들 것이라는 것을 깨달은 후에이 솔루션을 찾았습니다 . 100 %는 iframe에서 처리하는 간단한 방법입니다. 어떤 HTML 요소를 조작하고 있는지 확실하지 않기 때문에 귀하의 문제에 대해 잘 모릅니다.