나는 내가 미치겠다고 생각한다!element.style.width를 사용하여 Div의 너비를 가져올 수 없습니다. 대신 element.clientWidth를 사용해야합니까?
나는 div의 폭을 늘리거나 줄이기 위해 오른쪽 가장자리를 드래그 할 수있는 div를 갖기 위해 약간의 운동을 시작했습니다. 나는 또한 너비를 가진 컨테이너 Div를 가지고 있는데 이것을 사용하여 백분율을 결정할 것이다 - 기본적으로 내가 편집 할 수있는 일종의 막대 차트/막대 그래프를 만들 예정이다.
나는 코드를 작성하기 시작했고, 나는 백분율을 출력 할 수있을 것이라고 확신했다.
여기 perliminary 코드입니다 ....
<style>
#container{width:500px;}
#dragDiv{border:1px solid #000;background-color:pink;width:100px;height:100px;}
</style>
</head>
<body>
<div id="container">
<div id="dragDiv"></div>
</div>
<script>
function dragOneSide(innDiv, outDiv){
if(document.getElementById(innDiv) && document.getElementById(outDiv)){
var iDiv = document.getElementById(innDiv),
oDiv = document.getElementById(outDiv);
// write out the width as a percentage
var iDivWidth = parseInt(iDiv.style.width),
oDivWidth = parseInt(oDiv.style.width);
//alert(document.getElementById("dragDiv").style.width);
iDiv.innerHTML = ((iDivWidth/oDivWidth) * 100);
}
}
window.onload = function(){
dragOneSide("dragDiv", "container");
}
</script>
이제 IDIV의 값이 NaN를했다? 나는 그것을 다소 이상하게 보았다. 너비를 알리려고 할 때 나는 문자 그대로 빈 문자열을 얻고 있었다. 오히려 이상하게 생각했습니다. 특히 복잡한 일을하려고하지 않았기 때문에. 나는 방화범을 사용하고 중단 점을 설정하고 감시 창을 관찰했다. Div의 너비에는 아무런 가치가 없었습니다. 그때 ... 그래서 같은 DIV에
<div id="container">
<div id="dragDiv" style="width:300px;">Hello World</div>
</div>
저를 인라인 스타일을 넣어 내가 지금 항목에 대한 값을 얻고 있었다 보라! 지금은 인라인 스타일 (누가합니까)을 좋아하지 않지만 전에는이 문제가 없었으며 JavaScript와 HTML을 수년간 사용해 왔습니다. 누구에게도 설명이 있습니까? CSS에서 설정하지 않은 너비를 검색하려면 clientWidth과 같은 다른 속성을 사용해야합니까?
ps. 드래그 코드를 아직 포함하지 않았으므로 그 점을 지적하지 마십시오.
var iDivWidth = parseInt(iDiv.style.offsetWidth),
oDivWidth = parseInt(oDiv.style.offsetWidth);