


JavaScript study notes (20) Obtaining and setting the characteristics (attributes) of elements_Basic knowledge
This section of html takes the following as an example
1. Get and set element properties through the attributes of HTMLElement type (object)
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//Get element properties
alert(div.id); //"myDiv"
alert(div.className); //"bd", this is not div.class, because class is a reserved keyword
alert(div.title); //"I am div"
alert( a.href); //http://www.baidu.com
//Set element properties
div.id = "myDiv2"; //Change id to "myDiv2"
div.className = "ft"; //class is changed to "ft". If there is a style named "ft", it will immediately change to the "ft" style, and the browser will respond immediately
div.title = "I am myDiv2" ; //Change title to "I am myDiv2"
div.align = "center"; //Set center alignment
img.src ="images/img1.gif"; //Set image path
a.innerHTML = "Sina"; //"Baidu" is changed to "Sina"
a.href = "http://www.sina.com.cn"; //Reset the hyperlink
2. Get, set, and remove the attributes of elements through the getAttribute(), setAttribute(), and removeAttribute() methods (not recommended, the first two methods have exceptions in IE6 and 7, and the third method IE6 Not supported, can be used when setting custom attributes)
getAttribute() method is used to obtain element attributes. It accepts one parameter, which is to get the attribute name of the element. The
setAttribute() method is used to set the attribute of the element. It accepts two parameters, namely to obtain the attribute name and attribute value of the element. The
removeAttribute() method is used to remove the attribute of the element. Accepts one parameter, which is the attribute name of the element to be removed
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//Get element properties
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd", note that this is class, not className, Different from the above
alert(div.getAttribute("title")); //"I am div"
alert(a.getAttribute("href")); //http://www.baidu. com
//Set element attributes
div.setAttribute("id","myDiv2"); //Change id to "myDiv2"
div.setAttribute("class","ft"); / /class is changed to "ft", here it is also class, not className
div.setAttribute("title","I am myDiv2"); //title is changed to "I am myDiv2"
div.setAttribute ("align","center"); //Set center alignment
img.setAttribute("src","images/img1.gif"); //Set image path
//Remove element attributes
div.removeAttribute("class"); //Remove the class attribute
3. Get, set, and remove the attributes of the element through the attributes attribute
var div = document.getElementById("myDiv");
//Get element properties
alert(div.attributes["id"].nodeValue); //"myDiv"
//Set element attributes
div.attributes["id"].nodeValue = "myDiv2"; //id Change to "myDiv2"
//Remove element attributes
div.attributes.removeNamedItem("class"); //Remove class attributes

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Understand the key features of SpringMVC: To master these important concepts, specific code examples are required. SpringMVC is a Java-based web application development framework that helps developers build flexible and scalable structures through the Model-View-Controller (MVC) architectural pattern. web application. Understanding and mastering the key features of SpringMVC will enable us to develop and manage our web applications more efficiently. This article will introduce some important concepts of SpringMVC

With the rapid development of the Internet, programming languages are constantly evolving and updating. Among them, Go language, as an open source programming language, has attracted much attention in recent years. The Go language is designed to be simple, efficient, safe, and easy to develop and deploy. It has the characteristics of high concurrency, fast compilation and memory safety, making it widely used in fields such as web development, cloud computing and big data. However, there are currently different versions of the Go language available. When choosing a suitable Go language version, we need to consider both requirements and features. head

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

How to use CSS to achieve the transparency gradient effect of elements In web development, adding transition effects to web page elements is one of the important means to improve user experience. The gradient effect of transparency can not only make the page smoother, but also highlight the key content of the element. This article will introduce how to use CSS to achieve the transparency gradient effect of elements and provide specific code examples. Using the CSS transition attribute To achieve the transparency gradient effect of an element, we need to use the CSS transition attribute. t

As a fast and efficient programming language, Golang is also widely used in the field of web development. Among them, middleware, as an important design pattern, can help developers better organize and manage code, and improve the reusability and maintainability of code. This article will introduce the key features and application scenarios of middleware in Golang, and illustrate its usage through specific code examples. 1. The concept and function of middleware. As a plug-in component, middleware is located in the request-response processing chain of the application. It is used

Go language is a programming language developed by Google. It has the characteristics of simplicity, efficiency, and concurrency support, and has gradually attracted widespread attention and application. In many cases, developers may need to interact with the C language or take advantage of the features of the C language. At this time, they need to consider whether the Go language is compatible with the features of the C language. This article will introduce the compatibility between Go language and C language, and provide specific code examples to illustrate the relationship between them. Features of Go language Go language is a statically typed, compiled, and concurrency-supported programming language.
