스타일이 %로 설정된 요소에서 너비를 픽셀 단위로 가져 오시겠습니까?

스타일이 %로 설정된 요소에서 너비를 픽셀 단위로 가져 오시겠습니까?

---

이 요소가 있습니다.

<div style="width: 100%; height: 10px;"></div>

너비를 픽셀 단위로 얻고 싶습니다. 나는 이것을 시도했다.

document.getElementById('banner-contenedor').style.width

Wich는 100%. 실제로 자바 스크립트를 사용하여 요소의 너비를 픽셀 단위로 가져올 수 있습니까?

---

document.getElementById('banner-contenedor').clientWidth

---

계산 된 너비를 얻고 싶습니다. 시험:.offsetWidth

(즉 : this.offsetWidth='50px'또는 var w=this.offsetWidth)

당신은 또한 이 대답 을 좋아할 것 입니다.

---

하나의 대답이 바닐라 JS에서 요청한 것을 수행하지 않으며 바닐라 대답을 원하므로 직접 만들었습니다.

clientWidth는 패딩을 포함하고 offsetWidth는 다른 모든 것을 포함합니다 ( jsfiddle 링크 ). 원하는 것은 계산 된 스타일 ( jsfiddle 링크 ) 을 얻는 것 입니다.

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

편집 : getComputedStyle비표준입니다. 일부 브라우저는 요소에 스크롤바가있는 경우 스크롤바를 고려하는 값을 반환합니다 (이는 CSS에 설정된 너비와 다른 값을 제공함). 요소에 스크롤바가있는 경우에서 여백과 패딩을 제거하여 너비를 수동으로 계산해야합니다 offsetWidth.

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

---

사용할 수 있습니다 offsetWidth. 자세한 내용은이 게시물 과 질문 을 참조하십시오.

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

div {border: 1px solid #F00;}

<div style="width: 100%; height: 10px;"></div>

---

jQuery를 사용해보십시오.

$("#banner-contenedor").width();

---

이 jQuery는 나를 위해 일했습니다.

$("#banner-contenedor").css('width');

이것은 계산 된 너비를 얻을 것입니다

http://api.jquery.com/css/

---

yourItem.style['cssProperty']

이렇게하면 속성 문자열을 동적으로 호출 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/11927844/get-width-in-pixels-from-element-with-style-set-with