투케이2K

506. (javaScript) [간단 소스] 자바스크립트 textarea 에 설정 된 fontSize 폰트 사이즈 확인 및 동적 style 스타일 지정 폰트 사이즈 변경 본문

JavaScript

506. (javaScript) [간단 소스] 자바스크립트 textarea 에 설정 된 fontSize 폰트 사이즈 확인 및 동적 style 스타일 지정 폰트 사이즈 변경

투케이2K 2026. 3. 10. 19:37
728x90
반응형

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / textarea / fontSize


- 사전) 👉 textarea 간략 설명 : 

  >> HTML 의 <textarea> 컴포넌트는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 해주는 폼 요소입니다.

  >> HTML 의 <textarea> 컴포넌트는 메모장 같은 입력 영역이 필요한 곳에서 사용됩니다.

  >> 기본 형태 : <textarea></textarea>

  >> 주요 속성 : 

    - rows / cols : 표시되는 줄 수 / 너비(문자 수)를 설정
    - placeholder : 입력 전 안내 문구 표시
    - maxlength : 최대 입력 글자 수 제한
    - readonly : 읽기 전용 (입력 불가, 복사는 가능)
    - disabled : 비활성화 (입력도 안 되고, form 제출에도 포함되지 않음)
    - name : form 데이터를 서버로 보낼 때 key 역할
    - wrap : 자동 줄바꿈 방식을 제어

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

---------------------------------------------------
[Body 에 textarea 컴포넌트 생성 수행]
---------------------------------------------------
<textarea 
  id="subscribeInput" 
  class="form-control border-strong big-input" 
  placeholder="자동 로그가 표시됩니다." 
  style="min-height:380px;">
</textarea>



---------------------------------------------------
[자바스크립트에서 textarea 객체 생성 수행]
---------------------------------------------------
var subscribeInput = document.getElementById('subscribeInput');



---------------------------------------------------
[자바스크립트에서 textarea 에 설정 된 현재 폰트 사이즈 확인 : px 반환]
---------------------------------------------------
const subFontSize = window.getComputedStyle(subscribeInput).fontSize; // ex : 16px



---------------------------------------------------
[자바스크립트에서 textarea 동적 style 지정 및 폰트 사이즈 변경 수행]
---------------------------------------------------
const number = 20;

subscribeInput.style.fontSize = String(number) + "px";

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[자바스크립트 사용해 p 태그 텍스트 확인 및 변경 , css style 속성 변경 실시]

https://kkh0977.tistory.com/787

https://blog.naver.com/kkh0977/222378535016?trackingCode=blog_bloghome_searchlist


[자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트]

https://kkh0977.tistory.com/8663

https://blog.naver.com/kkh0977/224200045885?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
728x90
반응형
Comments