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

class html input

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" />

Copy after login

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 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>

Copy after login

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 of this Website

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