jQuery load() 함수는 입력 텍스트의 높이를 변경합니다.

그래,이 html 파일 (sec1_2.html)이 있습니다. jQuery load() 함수는 입력 텍스트의 높이를 변경합니다.

<body> 
<div id="nameContainer"> 
    <input id="sect1Name"> 
</div> 
<style type="text/css"> 
    body { 
     margin: 0px; 
     padding: 0px; 
    } 

    div#nameContainer { 
     background: none repeat scroll 0% 0% #000; 
     height: 50px; 
     padding: 0; 
     margin: 0; 
    } 

    input#sect1Name { 
     width: 330px; 
     margin: 0; 
     height: 50px; 
     padding: 0; 
    } 
</style>

그것에 입력 간단한 DIV이다. 보시다시피 div 및 입력의 높이가 동일합니다 (50 픽셀). 이 페이지를 표시 할 때 똑같은 높이의 div 안에 입력이 생깁니다.

하지만, 지금 나는이 다른 HTML (index.html을)를 가지고 :

<!DOCTYPE html> 
<html> 
<body> 
    <div id="section1"> 
</div>  

<script src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    $("#section1").load("sec1_2.html"); 
</script> 
</body>

지금, 여기, 내가 외부 HTML (sec1_2.html를)로드 빈 DIV 있습니다. 이렇게하면 입력의 (보이는) 높이가 증가합니다!

입력이 변경되지 않는 이유는 모르겠지만 높이가없는 입력을 입력하면 두 버전 모두 동일한 높이 (기본값)를 표시하지만 정의 된 높이를 설정하면 jQuery로로드 할 때 다른 높이가 표시됩니다. .

누구나 이런 일이 발생했는지 알 수 있습니다.

출처

2013-10-30 yeadude

은 증가 높이에서 오는 정확히 확인하려면 콘솔을 사용합니다. –

콘솔에 아무 것도 표시되지 않습니다. – yeadude

난 plunker에 코드를 붙여 잘 작동 http://plnkr.co/edit/WDaF1a107ES6mVzhdqEX?p=preview 자신의 문제를 보여주기 위해 – DaniP

안녕하세요 귀하의 의견은 jQuery를 호출 한 기본 속성없이 렌더링되어 있습니다 어떤 이유로, 당신은 당신의 CSS에이를 추가 할 수 있습니다

input#sect1Name { 
    box-sizing:border-box; 
}

이 속성은 jQuery를 사용하여 HTML의 기본 할당하지만되지 않습니다 .

http://plnkr.co/edit/6h8U9AQgFaNUb2plPbh6?p=preview

출처

2013-10-31 13:42:58 DaniP

좋은 !! 몇 가지 테스트를 통해 높이가 항상 같은 차이임을 발견했습니다. 6px; 그래서 특정 속성을 지정할 필요가 있다고 생각했습니다. 그것은이었다. 그래서 내 솔루션 (어제 게시 할 수 없었 음)은 다음과 같습니다. border : none; 하지만 너의 말이 더 합리적이다. 상자 크기를 검색했는데 왜 이렇게 행동했는지 설명합니다. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 감사! – yeadude

jQuery load() 함수는 입력 텍스트의 높이를 변경합니다.

답변

관련 문제