2011-02-02 2 views
2

참고 : 나는 offsetWidth를 알고 만요소의 offsetWidth를 쉽게 "설정할"수 있습니까?

나는 동일한 폭 팝업 'DIV'합성하려면 tr 요소를 만들려고 읽습니다.

그러나, 나는 설정하는 방법에 대한 난처한 상황에 빠진 내 divwidth 그래서 그 offsetWidthtr과 완전히 동일하다는 것을. 특히

(... 내가 두 그룹으로 패딩과 마진 오프셋 (offset)를 받고 생각할 수 있기 때문에)

div.width = tr.offsetWidth - div.paddingWidth - div.marginWidth 

만 확실히 더 나은 방법이있다 :

계산은 같을 것 가능하면 YUI 2에 대한 답변을 원합니다. 당신이 당신의 div의 다음 마진과 패딩은 다음과 같이 작동합니다 제로 아웃 경우

+0

당신의 질문에 답한 것처럼 보입니다. 내 유일한 추천 div의 계산 된 왼쪽 및 오른쪽 여백 및 패딩 값을 별도로, 그들은 모두 다를 수 있기 때문에 것입니다. –

+0

@Matt Ball : 좋아, 그래서 제목을 _easily_ 너비 설정으로 바 꾸었습니다. 어딘가에 라이브러리에 내장되어 있지 않다고 믿는 데 어려움이 있습니다. (심지어 YUI가 아닐지라도) – Stephen

+0

계산 된 스타일 등은 산술에 유용하지 않은 '40px'와 같은 값을 반환 할 수 있습니다. – Stephen

답변

2

:

YAHOO.util.Dom.setStyle(div, 'width', tr.offsetWidth + 'px'); 

을 당신이 당신의 div와의 국경을 다루는 방법에 따라 tr 당신은 tr.clientWidth을 대신 할당 할 수 있습니다 .

원하는 모양을 얻으려면 div의 부모/자식 요소에 필요한 여백/패딩을 설정할 수 있습니다.

다음은 정확히 clientWidth and offsetWidth measure을 이해하는 수행 할 수 있습니다 무엇을 작업하는 키와 요소의 CSS width은 컨텐츠 영역이며 (see the W3C box model here)에 정의 된 마진, 테두리, 패딩을 제외하는

.

당신은

+0

현재 내 div에는 배경색, 이미지 및 각 패딩을 설정하는 오류 클래스가 첨부되어 있습니다. 내가 여전히 부모 div의 너비를 설정 한 다음 너비가 100 % 인 오류를 포함시킬 수 있다고 생각하는 것이 맞습니까? – Stephen

+0

기본적으로 'div'와 같은 블록 레벨 요소는 상위 컨테이너의 너비를 차지하므로 너비를 설정하지 않아도됩니다. –

+0

새 컨테이너 div가 생성되고 올바른 너비로 0이 생성되고 형식이 지정된 원본/하위 div가 컨테이너를 채우고 모든 멋진 패딩을 포함합니다. 감사합니다. – Stephen

0

에서 질의하여 계산 등 패딩을 포함 할 수 그것은 좀 지저분 그리고 나는 그것을 제안에 대한을 downvoted 얻을 수 있지만, 한 가지 방법은 당신이 당신의 마진이나 패딩 덤비는없이이 작업을 수행 할 수 div의 너비를 알려진 값으로 설정 한 다음 div의 offsetWidth와의 차이를 찾는 것입니다. 그것은 너를 적합하게하기 위하여 폭을에 놓는 무엇을 말해야한다.

div.style.width = '20px' 
diff = div.offsetWidth - 20; 
div.style.width = tr.offsetWidth - diff; 

정말 지저분하지만 패딩, 여백 또는 경계선을 신경 쓸 필요가 없습니다.