크롬에서 사용자 입력 동적 div 높이

파이어 폭스와 IE에서 아름답게 작동하는 크기 조정 div의 코드 조각을 발견했지만 (작성하지 않음) Chrome에서는 확장하기가 매우 어렵습니다. 너는 그것을 펴려고 노력한다. 왜 그런지 잘 모르겠습니다. 문제를 해결하기가 어렵습니다.크롬에서 사용자 입력 동적 div 높이

크롬이 종종이 div를 확장하기를 거부하는 이유에 대한 힌트가 좋을 것입니다. 직접 시험해보십시오.

#mydiv{ 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    border: 1px solid #808080; 
    overflow: auto; 
} 

#statusbar{ 
    cursor: s-resize; 
    position:relative; 
    display:block; 
    background-color: #c0c0c0; 
    font-size: 0px; 
    margin:0; 
    height:5px; 
    border: 1px solid #808080; 
    padding:0; 
    width: 250px; 
}

스크립트 :

var curHeight=0; 
var curMousePos=0; 
var mouseStatus='up'; 
var curEvent; 

//this function gets the original div height 
function setPos(e){ 
    curEvent=(typeof event=='undefined'?e:event); 
    mouseStatus='down'; 
    //gets position of click 
    curMousePos=curEvent.clientY; 
    curHeight=parseInt(document.getElementById('mydiv').style.height.split('p')[0]); 
} 

//this changes the height of the div while the mouse button is depressed 
function getPos(e){ 
    if(mouseStatus=='down'){ 
     curEvent=(typeof event=='undefined'?e:event); 
     //how many px to update the div? difference of previous and current positions 
     var pxMove=parseInt(curEvent.clientY-curMousePos); 
     var newHeight=parseInt(curHeight+pxMove); 
     //conditional to set minimum height to 5 
     newHeight=(newHeight<5?5:newHeight); 
     //set the new height of the div 

     document.getElementById('mydiv').style.height=newHeight+'px'; 
    } 
}

마지막으로 HTML :

<div> 
    <div id="mydiv" style="height: 250px; min-height:150px; "> 
     <div></div> 
    </div> 
    <div onmousedown="setPos(event)" onmouseup="mouseStatus='up'" id="statusbar"></div> 
</div>

편집 : 크롬은 CSS3 속성 크기 변경을 지원 보인다. 이것은 내가 사용한 JS 접근법보다 굉장하고 낫다. 그래도 위의 코드는 FF/IE 에서처럼 크롬에서 작동하므로 브라우저 유형을 확인하지 않아도됩니다.

출처

2010-12-27 Amalgovinus

향후 참조를 위해 당신은 당신이 서식을 표시하고 포맷하는 텍스트 영역 위의'{}'아이콘을 클릭하여 원하는 코드의 전체 섹션을 강조 표시 할 수 있습니다. – Robert

enter image description here

<!doctype html> 

<html> 
    <head> 
     <script> 
      window.onload = function() { 
       var div = document.getElementById ("statusBar"); 

       var press = false; 

       div.onmousedown = function() { 
        press = true; 

        return false; 
       } 

       this.onmousemove = function (event) { 
        event = event ? event : window.event; 

        if (press === true) { 
         div.style.height = event.clientY + "px"; 
        } 
       } 

       this.onmouseup = function() { 
        press = false; 
       } 
      } 
     </script> 

     <style> 
      #statusBar { 
       background-color: #c0c0c0; 
       border: 1px solid #808080; 
       cursor: s-resize; 
       margin: 0; 
       min-height: 5px; 
       padding: 0; 
       width: 250px; 
      } 
     </style> 

     <title></title> 
    </head> 

    <body> 
     <div id = "statusBar"></div> 
    </body> 
</html>

출처

2011-02-08 12:59:16 Caio

인상적인 Frickin. 좋은 작업. IE에서는 작동하지 않지만 FF와 크롬에서는 놀라 울 정도로 부드럽습니다. – Amalgovinus

그래서 ..... IE에서 addEventListener를 attachEvent로 대체하고 버블 링 부울을 없애는 이유는 무엇입니까 (오류 없음). – Amalgovinus

JavaScript를 이해하고 싶다면 조금 손을 내밀기 만하면됩니다. 코드 재 작성. – Caio

크롬에서 사용자 입력 동적 div 높이

답변

관련 문제