자바스크립트에서 숨겨진 요소의 높이를 얻는 방법

획득 방법: 1. jquery 파일을 도입합니다. 2. "$("#id value")" 문을 사용하여 지정된 id 값에 따라 숨겨진 요소 객체를 얻습니다. )" 문을 사용하여 숨겨진 요소 높이를 얻습니다.

이 튜토리얼의 운영 환경: windows7 시스템, javascript1.8.5&&jquery3.1.0 버전, Dell G3 컴퓨터.

먼저 일반적인 상황에서 div에 높이가 있는지 확인하세요.

nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容，需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  //21
    console.log($("#divsub").height()) //21
</script>

id가 div인 요소에 style="display:none;"를 추가할 때 코드를 다시 실행하면 결과는 다음과 같습니다. style="display:none;" 之后，重新运行代码，结果如下：

可以看到，父div能正常获取值，而子div已经获取不到高度了。

当我们把 style="display:none;" 改成 style="visibility: hidden;"

부모님이 div는 정상적으로 값을 얻을 수 있으며 하위 div는 더 이상 높이를 얻을 수 없습니다.

style="display:none;" 을 style="visibility:hidden;" 으로 변경해도 정상적으로 얻을 수 있습니다. 그러나 div의 위치는 여전히 존재합니다.

그래서 다음과 같은 해결책이 있습니다. 가시성을 사용하여 숨긴 다음 div를 화면 밖의 보이지 않는 곳으로 이동하세요. 🎜

nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容，需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  
    console.log($("#divsub").height())
</script>

🎜【추천 학습: 🎜javascript 고급 튜토리얼🎜】🎜

위 내용은 자바스크립트에서 숨겨진 요소의 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!