pre 태그의 세로 길이를 JavaScript를 사용하여 동적으로 감지

아래는 <pre> 태그의 세로 길이를 감지하여 콘솔에 출력하는 JavaScript 코드의 예제입니다.

<div id="mybox2">
  <div class="layer_song">
    <pre>
      <!-- 내용 -->
    </pre>
  </div>
</div>

<script>
  // <pre> 태그의 세로 길이를 감지하는 함수
  function detectPreHeight() {
    const preElement = document.querySelector('.layer_song pre');
    const preHeight = preElement.clientHeight;
    console.log(`<pre> 태그의 세로 길이: ${preHeight}px`);
  }

  // 페이지 로드 시 세로 길이 감지 실행
  window.onload = detectPreHeight;
</script>

위의 코드에서 detectPreHeight 함수는 <pre> 태그의 세로 길이를 감지하고 console.log를 사용하여 콘솔에 출력합니다. window.onload 이벤트를 사용하여 페이지가 로드될 때 함수를 호출합니다.

이렇게 하면 페이지가 로드될 때 <pre> 태그의 세로 길이가 콘솔에 출력됩니다. 이 코드를 원하는 곳에서 사용하여 세로 길이를 감지하고 필요한 작업을 수행할 수 있습니다.

 

감지된 길이를 css 에 바로 적용

<pre> 태그의 세로 길이를 JavaScript로 감지한 후 CSS에 바로 적용하는 방법이 있습니다. 이를 위해 JavaScript를 사용하여 스타일을 동적으로 변경할 수 있습니다.
다음은 JavaScript를 사용하여 감지된 세로 길이를 <pre> 태그의 스타일로 적용하는 예제입니다.

 

HTML:

<div id="mybox2">
  <div class="layer_song">
    <pre>
      <!-- 내용 -->
    </pre>
  </div>
</div>

 

JavaScript:

// <pre> 태그의 세로 길이를 감지하고 스타일을 적용하는 함수
function applyPreHeight() {
  const preElement = document.querySelector('.layer_song pre');
  const preHeight = preElement.clientHeight;

  // 스타일을 동적으로 적용
  preElement.style.height = preHeight + 'px';
}

// 페이지 로드 시 세로 길이를 감지하고 스타일을 적용
window.onload = applyPreHeight;

위의 코드에서 applyPreHeight 함수는 <pre> 태그의 세로 길이를 감지하고 style.height를 사용하여 동적으로 스타일을 적용합니다. 페이지가 로드될 때 이 함수가 호출되며, <pre> 태그의 세로 길이가 스타일로 적용됩니다.

이렇게 하면 JavaScript를 사용하여 감지된 세로 길이를 CSS 스타일로 바로 적용할 수 있습니다.