텍스트는 모든 애플리케이션이나 웹페이지에서 가장 중요하고 가장 눈에 띄는 자산입니다. 텍스트를 사용하지 않으면 작성자가 자신의 생각을 완전히 전달하거나 정보를 적절하게 전달할 수 없습니다. 그 필요성과 중요성으로 인해 스타일은 대부분의 개발자에게 악몽이 됩니다. 정적 텍스트의 경우 CSS 속성과 해당 프레임워크가 많은 도움이 되지만 여전히 스타일에 동적으로 적용할 수 있는 속성이 필요합니다. 다행스럽게도 이 속성은 '라는 이름의 JavaScript에서 제공됩니다. 텍스트장식 '.
이 블로그에서는 textDecoration 속성을 통해 HTML 요소에 스타일을 적용하는 절차를 제공합니다.
HTML DOM 스타일 textDecoration 속성을 사용하여 스타일을 적용하는 방법은 무엇입니까?
DOM 스타일 “ 텍스트장식 ” 속성은 기본적으로 “를 추가하는 등의 스타일링을 수행합니다. 밑줄”, “윗줄”, “줄바꿈” 및 “깜박임” '를 선택한 요소 위에 표시합니다. 이 속성은 “ 없음 ”는 앵커 태그와 같이 해당 요소에 적용되는 기본 스타일을 제거합니다.
통사론
DOM 스타일 textDecoration 속성의 구문은 다음과 같습니다.
eleObj. 스타일 . 텍스트장식 = '없음|윗줄|깜박임|밑줄|초기|줄바꿈|상속'
'에 할당할 수 있는 값에 대해 빠르게 알아보려면 아래 표를 참조하세요. 텍스트장식 ' 재산:
| 값 | 설명 |
|---|---|
| 없음 | 미리 정의된 모든 스타일을 제거하고 텍스트를 일반 형식으로 변환합니다. 그것은 기본값입니다. |
| 윗줄 | 선택한 텍스트 위나 위에 줄을 삽입합니다. |
| 깜박거리다 | 텍스트를 깜박이게 하지만 모든 웹 브라우저에서 지원되는 것은 아닙니다. |
| 밑줄 | 선택한 텍스트 아래 또는 맨 아래에 줄을 배치합니다. |
| 초기의 | 적용된 속성을 기본값(이 경우 없음)으로 설정합니다. |
| 라인스루 | 텍스트 중앙, 즉 텍스트 사이에 선을 배치합니다. |
| 상속하다 | 루트 또는 상위 요소에 적용된 속성을 상속합니다. |
이제 구현 프로세스와 '의 각 값이 텍스트에 미치는 영향을 살펴보겠습니다. 텍스트장식 ' 재산.
예시 1: 'textDecoration = none' 속성
'의 실질적인 구현 텍스트장식 ” 값이 “인 속성” 없음 ”는 아래 코드에서 설명됩니다.
< 몸 >
< 센터 >
< h1 스타일 = '색상: 생도블루;' > 리눅스 < / h1 >
< 단추 클릭하면 = '적용자()' > 신청자 < / 단추 >
< 피 > textDecoration 속성 값이 없음으로 설정된 경우: < / 피 >
< h3 ID = '사용 사례' 스타일 = '텍스트 장식: 윗줄;' > 타겟 요소 < / h3 >
< / 센터 >
< 스크립트 >
함수 적용자() {
document.getElementById('useCase').style.textDecoration = '없음';
}
< / 스크립트 >
< / 몸 >
위에서 언급한 코드에 대한 설명:
- 먼저, “< 단추 >' 태그를 사용하여 버튼을 생성하고 '' 이벤트 리스너를 할당합니다. 클릭하면 '. 이 이벤트 리스너는 '라는 JavaScript 함수를 트리거합니다. 신청자 '.
- 다음으로 타겟 요소 '를 생성합니다. h3 '라는 고유 ID를 할당합니다. 사용 사례 '. 또한 CSS “ 텍스트 장식 ” 속성은 “의 값을 갖습니다. 윗줄 '의 도움으로 ' 스타일 ' 기인하다.
- 이제 “ 신청자 ()” 함수 본문을 사용하고 해당 ID “를 통해 대상 요소를 선택합니다. 사용 사례 ' 그리고 스타일 '을 붙입니다. 텍스트장식 ' 재산.
- 그런 다음 속성에 ' 없음 ”를 사용하여 요소 위에 미리 적용된 텍스트 장식 스타일을 제거합니다.
위 코드를 실행한 후의 웹페이지 모습:
출력에는 대상 요소에 적용된 사전 스타일 지정이 '값을 할당하여 제거됨을 보여줍니다. 없음 '.
예시 2: 'textDecoration = 초기' 속성
아래 코드 조각은 ' 텍스트장식 '의 값이 '인 경우' 속성 초기의 '가 할당되었습니다.
< 스크립트 >기능 신청자 ( ) {
문서. getElementById ( '사용 사례' ) . 스타일 . 텍스트장식 = '초기의' ;
}
스크립트 >
위 코드를 컴파일한 후 생성된 출력은 다음과 같습니다.
위 출력은 텍스트 장식 값이 기본값인 ''로 설정되어 있음을 보여줍니다. 없음 ” 따라서 모든 사전 스타일링이 되돌려졌습니다.
예시 3: 'textDecoration = overline' 속성
아래 코드는 “ 텍스트장식 '의 값이 '인 경우' 속성 윗줄 '가 제공됩니다:
< 몸 >< 센터 >
< h1 스타일 = '색상: 생도블루;' > 리눅스 < / h1 >
< 단추 클릭하면 = '적용자()' > 신청자 < / 단추 >
< 피 > textDecoration 속성 값이 overline으로 설정된 경우: < / 피 >
< h3 ID = '사용 사례' > 타겟 요소 < / h3 >
< / 센터 >
< 스크립트 >
함수 적용자() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / 스크립트 >
< / 몸 >
위 코드에 대한 설명은 다음과 같습니다.
- 첫째, “ 버튼”과 “h3 ” 요소는 동일한 방식으로 생성되고 CSS 속성이 적용됩니다. “h3” 이제 요소가 제거되었습니다.
- 다음으로 ' 신청자 ” 기능에서는 대상 요소가 선택되고 “ 텍스트장식 ” 값이 “인 속성” 윗줄 '라는 요소가 할당되었습니다.
위 코드를 실행한 후의 출력은 다음과 같습니다.
출력은 ' textDecoration = 윗줄 ” 텍스트에 대한 속성입니다.
예시 4: 'textDecoration = underline' 속성
“의 가치가 있을 때 텍스트의 실제 구현 밑줄 '는 '에 할당됩니다. 텍스트장식 ” 속성은 다음과 같습니다.
< 스크립트 >기능 신청자 ( ) {
문서. getElementById ( '사용 사례' ) . 스타일 . 텍스트장식 = '밑줄' ;
}
스크립트 >
컴파일 후 출력은 다음과 같습니다.
출력에는 텍스트 하단에 줄이 추가된 것으로 표시됩니다.
예시 5: 'textDecoration = line-through' 속성
'의 시각적 구현 텍스트장식 ' '의 가치를 갖는 속성 라인스루 '는 아래와 같습니다.
< 스크립트 >기능 신청자 ( ) {
문서. getElementById ( '사용 사례' ) . 스타일 . 텍스트장식 = '라인 스루' ;
}
스크립트 >
위 코드에 대해 생성된 출력은 다음과 같습니다.
출력에는 ' 라인스루 '라는 메시지가 대상 요소 텍스트 위에 표시됩니다.
결론
HTML DOM 스타일 “ 텍스트장식 ” 속성은 특히 JavaScript를 통해 HTML 요소의 스타일을 처리하여 텍스트 요소에 대한 동적 스타일을 수행합니다. 이 '에 여러 값을 할당할 수 있습니다. 텍스트장식 ” 다양한 스타일링을 선보입니다. 이 값은 “ none”, “overline”, “underline”, “line-through”, “initial”, “blink” 및 “inherit” '. 이 블로그에서는 개발자가 textDecoration 속성을 사용하여 스타일을 적용할 수 있는 프로세스를 성공적으로 설명했습니다.