In order to thank readers for their support during this period of time, I put a private wechat on the homepage. If you need technical communication, you can directly add A Ken to communicate with me on wechat. Thank you for meeting me

Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).

This blog is suitable for just contactJSAnd the friends who want to review after a long time.

🌊🌈

7.2_ Attribute Operations

In HTML, elements have built-in attributes, such as id, class, title, and style for div elements. Developers can also add custom attributes to elements. In practice, custom attributes have a wide range of applications, such as storing data that needs to be used in JavaScript.

7.2.1_ Get the Attribute Value Element. attribute

You can use the “element. attribute” method in DOM objects to obtain built-in attribute values, but DOM objects cannot directly obtain custom attribute values using dot syntax. How to obtain custom attribute values? In the DOM, you can use the getAttribute(‘ attribute ‘) method to return the attribute value of a given element.

Example: Demonstrates how to get property values,

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="demo" index="1" class="nav"></div>
		
		<script>
			
			var div = document.querySelector('div');
			console.log(div.id); // The result is demo
			console.log(div.getAttribute('id')); // The result is demo
			console.log(div.getAttribute('index')); // Result :1
			
		</script>
		
	</body>
</html>
Copy the code

In the above code, we use element. attribute and element.getAttribute to get the built-in attribute ID of the div element, and the output is demo. Although both methods can be used to obtain built-in attribute values, in practice it is recommended to use “Element. Property “is a more succinct way. Use getAttribute(‘ index ‘) to get the developer-defined index attribute, and the output is 1.

7.2.2_ Setting the Attribute Value Element. setAttribute(‘ Attribute ‘, ‘value’)

Built-in attribute values can be set using “element. attribute = ‘value'” in DOM objects, and “element.setAttribute(‘ attribute ‘, ‘value’)” is provided for custom attributes. It is worth mentioning that the tag has a custom attribute set that can be seen in the HTML structure of the browser.

Example: Demonstrates how to set property values,

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div></div>
		
		<script>
			
			var div = document.querySelector('div');
			div.id = 'test';
			div.className = 'navs';
			div.setAttribute('index'.2);
			
		</script>
		
	</body>
</html>
Copy the code

In the code above, set the div element’s built-in attribute to “element. attribute = ‘value’, set the id value to test, and set the class name to navs. Using the setAttribute() method, set the name of the attribute to index and the value to 2.

Alternatively, if you want to use setAttribute() to set the element’s class name, you can add the following code.

div.setAttribute ('class'.'footer');
Copy the code

Because class is special, the attribute value used here is class and the value is footer.

7.2.3_ Removing the Attribute Element.removeAttribute

Once you know how to get and set element attributes, there is another operation to learn, which is to remove element attributes. Use the “element.removeAttribute” method in the DOM to remove element attributes.

Example: Demonstrates how to remove attribute values,

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="test" class="footer" index="2"></div>
		
		<script>
			
			var div = document.querySelector('div');
			div.removeAttribute('id');
			div.removeAttribute('class');
			div.removeAttribute('index');
			
		</script>
		
	</body>
</html>
Copy the code

In this code, we use the removeAttribute() method to remove the ID, class, and index attributes of the div element.

7.2.4_[Case] Tab Bar Switching

TAB bar is widely used in websites. Its advantage lies in that it can display multiple pieces of content in a limited space. Users can switch between multiple pieces of content through tags.

Next we use our knowledge of custom properties to implement tab-bar toggle effects.

(1) Write HTML page, sample code is as follows,

<div class="tab">
<div class="tab_list">
<ul>
<li class="current">The introduction</li>
<li>Specifications and Packing</li>
<li>After-sale protection</li>
<li>Commodity Evaluation (50000)</li>
<li>Mobile community</li>
</u1>
</div>
<div class="tab_con">
<div class="item" style=" display: block; ">Product introduction module content</div>
<div class="item">Specifications and packaging module content</div>
<div class="item">After-sales support module content</div>
<div class="item">Product evaluation (50000) module content</div>
<div class="item">Mobile community module content</div>
</div>
</div>
Copy the code

In the code above, the element class as TAB is used to implement the outer border of the TAB bar. Lines 2 to 10 and 11 to 17 implement the tag section and content section of the TAB bar, respectively. In the first li of the label part, the current style is added to achieve the effect of the current label selection. Similarly, a display: block style is added to the corresponding content block div under this label to display the contents under the current label and hide the contents under other labels.

(2) To achieve label bar switch, the specific code is as follows.

<script>
// Get all the element objects in the tag section
var tab_list = document.querySelector (' .tab_llst ');
var lis = tab_list.guerySelectorAll('li');
// Get all the content objects in the content section
var items = document.querySelectorAll ('.item');
for (var i = 0; i < lis.length; i++) {// The for loop binds the click event
lis[i].setAttribute ('index',i);
lis[i].className = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ' ';
}
this.className = 'current';
// Display the content module below
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
Copy the code

In the above code, lines 3 and 4 retrieve elements through the querySeletorAIl() method. Lines 7 through 21 traverse each element object lis[I] in the tag section and bind the click event. In the event handler, lines 10 to 12 use exclusivity to click on the current item, clear all of Li’s class classes, and set itself the current class at line 13. At the same time, when the event occurs, execute lines 15 to 19 to display the current mouse click label and its corresponding content, and hide the display of other labels.

7.3_ Customizing Attributes

General custom attributes can be obtained by using the getAttribute (‘ attribute ‘) method, but some custom attributes are ambiguous and it is not easy to determine whether they are native attributes or custom attributes of an element. As a result, HTML5 has added a specification for custom attributes. HTML5 provides for setting custom attributes by “data-attribute name”.

We’ll look at the operation of custom attributes in more detail next.

7.3.1_ Setting Attribute Values

The “data-” custom attribute of the element can be set in two ways, *

1. Set the user-defined attribute data-index in HTML

_ Sets the data-index attribute on the div element as shown in the following example.

<div data-index="2"></div>
Copy the code

In the above code, data-index is a custom attribute, “data-” is the prefix of the custom attribute, and index is the developer’s custom attribute name.

2. Set user-defined attributes (setAttribute, element object. Dataset) in JavaScript. The property name)

_ In JavaScript code, you can use setAttribute(‘ attribute ‘, value) or “element object.dataset. Property name = ‘value’ “Two ways to set a custom property. Note that only custom properties starting with “data-” can be set using the latter method. The sample code is as follows.

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div></div>
		
		<script>
			
			var div = document.querySelector('div');
			div.dataset.index = '2';
			div.setAttribute('data-name'.'andy');
			
		</script>
		
	</body>
</html>
Copy the code

In the above code, add attributes to the div element by “element object.dataset. Attribute name”. Add data-name = ‘Andy’ by setAttribute (‘ attribute ‘, ‘value’).

Execute the code above and view the div element in a browser, as shown below.

<div data-index="2" data-name="andy"></div>
Copy the code

7.3.2_ Obtaining the Attribute Value

In DOM manipulation, there are two ways to get property values,

1. Through the getAttribute ()

This method can obtain built-in attributes or custom attributes.

2. Use the new “element.dataset” in HTML5. Property “or” element.dataset [‘ property ‘] “.

_ Push to use the first one, because the second one has compatibility issues, only since IE11 support.

Example: Demonstrates how to get property values, with the following code.

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div getTime="20" data-index="2" data-list-name="andy"></div>
		
		<script>
			
			var div = document.querySelector('div');
			console.log(div.getAttribute('data-index')); // The result is :2
			
			console.log(div.getAttribute('data-list-name')); // Result: Andy
			
			// H5 can only get attributes starting with data-
			console.log(div.dataset); // DOMStringMap {index: "2", listName: "andy"}
			
			console.log(div.dataset.index); // The result is :2
			
			console.log(div.dataset['index']); // The result is :2
			
			console.log(div.dataset.listName); // Result: Andy
			
			console.log(div.dataset['listName']); // Result: Andy
			
		</script>
		
	</body>
</html>
Copy the code

In the above code, the dataset in the code is a collection containing all the custom attributes starting with data. If the custom property contains more than one hyphen (-), use camel name to get it, for example, listName in the above line.

That’s the end of today’s introductory study

Peace

🌊🌈

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology

Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)

Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16)

🌊🌈 About postscript:

Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice

Original is not easy, “like” + “attention” thanks for your support ❤