[javascript] .width ()에서 반환 된 값을 반올림하지 않도록 jQuery를 만드는 방법은 무엇입니까?

Program / 글쓴이

나는 주위를 수색했지만 이것을 찾을 수 없었다. div의 너비를 얻으려고하는데 소수점이 있으면 숫자를 반올림합니다.

예: 

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

그렇게 $('#container').width();하면 543.5 대신 543이 반환됩니다. 숫자를 반올림하지 않고 전체 543.5 (또는 숫자가 무엇이든)를 반환하려면 어떻게해야합니까?

답변

Element.getBoundingClientRect요소의 스타일보다는 기본을 사용하십시오 . IE4에서 도입되었으며 모든 브라우저에서 지원됩니다.

$("#container")[0].getBoundingClientRect().width

참고 : IE8 이하의 경우 MDN 문서 의 “브라우저 호환성”참고 사항 을 참조하십시오 .

코드 스 니펫 표시

답변

Ross Allen의 대답 은 좋은 시작점이지만 getBoundingClientRect (). width를 사용 하면 jquery의 너비 함수 가 아닌 패딩과 테두리 너비도 포함 됩니다 .

반환 된 TextRectangle 객체에는 패딩, 스크롤 막대 및 테두리가 포함되지만 여백은 제외됩니다. Internet Explorer에서 경계 사각형의 좌표에는 클라이언트 영역의 위쪽 및 왼쪽 테두리가 포함됩니다.

width정밀도로 값 을 얻으려면 다음 과 같이 패딩과 테두리를 제거해야합니다.

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

답변

질문은 오래되었지만 여기에 내 경험을 추가하고 싶었습니다. 위의 합의는 jQuery의 반올림이 반올림되지 않은 계산만큼 효과적이라는 것 같습니다. .

내 요소는 일반적으로 유동적이지만 AJAX를 통해 동적으로 변경되는 콘텐츠입니다. 콘텐츠를 전환하기 전에 일시적으로 요소의 크기를 잠 가서 전환 중에 레이아웃이 튀지 않도록합니다. 다음과 같이 jQuery를 사용하는 것을 발견했습니다.

$element.width($element.width());

실제 너비와 계산 된 너비 사이에 하위 픽셀 차이가있는 것처럼 재미를 유발합니다. (특히, 텍스트의 한 줄에서 다른 줄로 단어가 이동하는 것을 볼 수 있는데, 이는 단지 잠긴 것이 아니라 너비가 변경되었음을 나타냅니다.) 다른 질문에서- 요소의 실제 부동 소수점 너비 가져 오기 -발견했습니다 그 밖으로 window.getComputedStyle(element).width반올림 계산을 반환합니다. 그래서 위의 코드를 다음과 같이 변경했습니다.

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

그리고 그 코드를 사용 하면 재미있는 바운싱이 없습니다! 그 경험은 반올림 값이 실제로 제안 것 같다 않는 오른쪽 브라우저에 문제? (제 경우에는 Chrome 버전 26.0.1410.65입니다.)

답변

다음과 같이 사용할 수 있습니다 getComputedStyle.

parseFloat(window.getComputedStyle($('#container').get(0)).width)

답변

정확한 너비를 얻으려면 다음을 사용하십시오.

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;

답변