Summary of the value of the class attribute of the tag in HTML and how to use it-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Summary of the value of the class attribute of the tag in HTML and how to use it

寻∝梦

Aug 27, 2018 pm 02:19 PM

classhtmlinput

This article mainly introduces you to the specific role of the class attribute of the input tag in HTML. There are examples to prove it. There is also an explanation of how to use the class attribute and attribute value of the input tag. The last point is about the class attribute. An example of other usage.

First of all, let’s talk about the role of the class attribute of the input tag in HTML:

The class attribute of the input tag is used to reference the class style of your page.

That is, you first define a class style in the tag, and then reference it.

Like this:

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

The effect of the page will not be displayed. Anyway, the color of the text on this button is red. If you are interested, you can try it yourself.

The following is an explanation of how to use the class attribute and attribute value of the specific input tag:

classname attribute. The class attribute in the a tag is used to add styles. The related concepts include class and mapping classname and classlist.

Generally speaking, all attributes can be accessed by object, object[""] and object.getAttribute(""), but because class is a JavaScript reserved word, it is mapped to classname for access by the above programs. Therefore, standard browsers support access in two ways: a.classname and a["classname"].

As for a.getattribute("class") or a.getattribute("classname"), it depends on whether the browser is compatible with this method of access. (To be tested: The former can run correctly in mozilla (firefox) and opera, but cannot be used in IE and safari. The latter can run correctly in IE and opera, but cannot be used in mozilla (firefox) and safari.)

But the DOM2-level method object.getattribute("") is no problem when used to obtain custom attributes in tags, so a conservative approach is

classList attribute. Because the value of the class attribute can contain several style names, such as class="top1 left", this string value often requires us to operate. Classname completes the mapping of class, but it seems very rigid when operating the value of the class attribute. . What to do? The new API classlist in HTML5 can solve this problem.

classlist attribute is another improvement on classname. Just like the arguments attribute and childnode attribute we have seen, it can be understood as an array-like object. (Still to be tested)

classlist brings some operation methods and attributes: add(), remove(), toggle(), contains(), etc. and length.

Can be accessed using a.classList or a["classList"], a.getAttribute("classList") still has browser compatibility issues.

In addition to being used in input tags, the class attribute also has other directions, such as the following:

Using the class attribute in HTML documentsExample：

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

Here is the comment:

The class attribute cannot be used in the following HTML elements: base, head, html , meta, param, script, style and title.

You can assign multiple classes to HTML elements, for example: . This allows you to combine several CSS classes into one HTML element.

Class names cannot start with numbers! Only Internet Explorer supports this practice.

【Related recommendations】

What does the head tag in HTML mean? An article teaches you how to use the head tag correctly

#How to center the th header content in an html table? A detailed introduction to the align attribute of th header tag

The above is the detailed content of Summary of the value of the class attribute of the tag in HTML and how to use it. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

What is the 'class' attribute in HTML?Apr 28, 2025 pm 05:37 PM

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

See all articles