HTML의 <input> 태그의 class 속성 값과 사용 방법 요약-HTML 튜토리얼-php.cn

HTML의 태그의 class 속성 값과 사용 방법 요약

寻∝梦

풀어 주다： 2018-08-27 14:19:46

원래의

27888명이 탐색했습니다.

이 글에서는 주로 HTML에서 입력 태그의 클래스 속성의 구체적인 역할을 소개하고 있으며, 이를 증명하는 예시도 있습니다. . 마지막 요점은 클래스 속성에 관한 것입니다.

우선 HTML에서 입력 태그의 클래스 속성의 역할에 대해 이야기해 보겠습니다.

입력의 클래스 속성 태그는 참조용으로 사용됩니다. 페이지의 클래스 스타일입니다.

즉, 먼저 태그에 클래스 스타일을 정의한 다음 이를 참조합니다.

이렇게 하면

<style type="text/css">
.btn{
color:red;
}
</style>
<input type="button" class="btn" />

로그인 후 복사

페이지 효과가 표시되지 않습니다. 어쨌든 이 버튼의 텍스트 색상은 빨간색입니다. 관심이 있으시면 직접 시도해 볼 수 있습니다.

다음은 특정 입력 태그의 class 속성과 속성값을 사용하는 방법에 대한 설명입니다:

classname 속성. a 태그의 클래스 속성은 스타일을 추가하는 데 사용됩니다. 관련 개념에는 클래스와 매핑 클래스 이름 및 클래스 목록이 포함됩니다.

일반적으로 모든 속성은 object, object[""] 및 object.getAttribute("")로 액세스할 수 있지만 class는 JavaScript 예약어이므로 #🎜 🎜#에 매핑됩니다. classname을 사용하여 위 솔루션에 대한 액세스를 제공합니다. 따라서 표준 브라우저는 a.classname 및 a["classname"]의 두 가지 방법으로 액세스를 지원합니다.

a.getattribute("class") 또는 a.getattribute("classname")의 경우 브라우저가 이 액세스 방법과 호환되는지 여부에 따라 다릅니다. (테스트 대상: 전자는 Mozilla(firefox) 및 Opera에서 올바르게 실행되지만 IE 및 Safari에서는 사용할 수 없습니다. 후자는 IE 및 Opera에서 올바르게 실행되지만 Mozilla(firefox) 및 Safari에서는 사용할 수 없습니다.) # 🎜🎜#

그러나 DOM 레벨 2 메소드 object.getattribute("")는 태그에서 사용자 정의 속성을 가져오는 데 적합하므로 보수적인 접근 방식은

#🎜🎜 #classListAttribute#🎜 🎜#. 클래스 속성의 값에는 class="top1 left"와 같은 여러 스타일 이름이 포함될 수 있으므로 이 문자열 값은 종종 작업이 필요합니다. Classname은 클래스 매핑을 완료하지만 클래스 값을 작업할 때는 매우 경직된 것처럼 보입니다. 기인하다. . HTML5의 새로운 API 클래스 목록은 이 문제를 해결할 수 있습니다.

classlist attribute은 우리가 본 인수 속성 및 childnode 속성과 마찬가지로 배열과 유사한 객체로 이해될 수 있습니다. (아직 테스트 중)

classlist에서는 add( ), 제거( ), 전환( ), 포함( ) 등의 몇 가지 작업 메서드 및 속성과 길이를 제공합니다. .

a.classList 또는 a["classList"]를 사용하여 액세스할 수 있습니다. a.getAttribute("classList")에는 여전히 브라우저 호환성 문제가 있습니다. 입력 태그에 사용되는 것 외에도 클래스 속성에는 다음과 같은 다른 방향도 있습니다.

HTML 문서에서 클래스 속성 사용# 🎜🎜 #

예

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>

로그인 후 복사

댓글은 다음과 같습니다. #🎜🎜 ##🎜 🎜 #class 속성은 기본, 헤드, html, 메타, 매개변수, 스크립트, 스타일 및 제목과 같은 HTML 요소에는 사용할 수 없습니다.

HTML 요소에 여러 클래스를 할당할 수 있습니다(예: ). 이를 통해 여러 CSS 클래스를 하나의 HTML 요소로 결합할 수 있습니다. 클래스 이름은 숫자로 시작할 수 없습니다! Internet Explorer에서만 이 방법을 지원합니다.

【관련 추천】

HTML에서 헤드 태그는 무엇을 의미하나요? 헤드 태그를 올바르게 사용하는 방법을 알려주는 기사가 있습니다.

html 테이블에서 번째 헤더 콘텐츠를 중앙에 배치하는 방법은 무엇인가요? 테이블 헤더 태그의 정렬 속성에 대한 자세한 소개

위 내용은 HTML의 태그의 class 속성 값과 사용 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!