.width()가 반환한 값을 반올림하지 않도록 jQuery를 만드는 방법은 무엇입니까?

.width()가 반환한 값을 반올림하지 않도록 jQuery를 만드는 방법은 무엇입니까?

제가 검색해봤는데 이것을 찾을 수 없었습니다.저는 디브의 너비를 구하려고 하는데, 소수점이 있으면 숫자를 반올림합니다.

예:

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

내가 하면,$('#container').width();543.5 대신 543을 반환합니다.어떻게 하면 숫자를 반올림하지 않고 543.5(또는 숫자가 무엇이든) 전체를 반환할 수 있습니까?

요소의 스타일이 아닌 네이티브를 사용합니다.IE4에 도입되었으며 모든 브라우저에서 지원됩니다.

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

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

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Ross Allen의 답변은 좋은 출발점이지만 getBoundingClientRect()를 사용합니다.너비는 또한 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 Version 26.0.1410.65)

사용할 수 있습니다.getComputedStyle그것을 위해:

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

다음을 사용하여 정확한 너비를 얻습니다.

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

언급URL : https://stackoverflow.com/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width