How to declare a custom attribute in HTML?

In this article, we will discuss how to declare a custom attribute in HTML. Custom attributes can be useful in HTML when you want to store some additional information that is not part of the standard HTML attributes. It allows for more flexibility and customization in HTML and can help make your code more maintainable and understandable.

Approaches

We have two different approaches to declaring a custom attribute in HTML including the following −

Let us look at each step in detail.

Approach: Using the «data- prefix method»

The first approach is to declare a custom attribute in HTML as “data- prefix”. we can define custom attributes by prefixing the attribute name with «data-«. You can create your own names for a custom attribute by using a prefix of your choice. This allows you to attach specific data to an HTML element, which can be easily targeted using CSS, JavaScript, or jQuery.

Example

Following is an example to declaring a custom attribute in HTML using “data- prefix”.

    h1 < color: blue; >th < color: red; >table < border-collapse: collapse; width: 100%; >th, td < padding: 5px; text-align: left; border-bottom: 1px solid #ddd; >tr:nth-child(even) 
Employee Table
 
 
 
Employee ID
 
Name
 
Department
 
Salary
 
 
 
 
001
 
Taylor
 
IT
 
$75,000
 
 
002
 
Jhon
 
HR
 
$60,000
 
 
 
    

Note − Here, JavaScript can access the custom attributes in the example code by selecting the «tr» elements based on their custom attributes, and then logging the values of those attributes to the console.

Approach: Using the «custom prefix method»

The first approach is to declare a custom attribute in HTML as a “custom prefix”. In HTML, a custom prefix refers to creating custom attributes on HTML elements. The prefix can be any name of your choice that is added before the attribute name, and it can be used to add additional data or information to an element. By using a custom prefix, you can create your own custom attributes that are specific to your needs and can be targeted in CSS or JavaScript.

Example

Following is an example of declaring a custom attribute in HTML using “custom prefix”.

    [custom] 
Tutorials point
 
Hello World!
    

It defines a custom attribute named «custom» and applies the CSS style to any element with that attribute.The JavaScript code selects the header and paragraph elements based on their custom attributes and logs the values of those attributes.

Conclusion

In this article, we examined two different approaches to declare a custom attribute in HTML. Here, we are using two different approaches “data- prefix” and the “custom prefix”. Both custom prefix and data- prefix are used to declare custom attributes in HTML, but the dataprefix is more widely recognized and is supported by all modern browsers. The custom prefix is more flexible, as it allows you to choose your own prefix name, but it may not be recognized by all browsers or tools.

Источник

How to add/update an attribute to an HTML element using JavaScript?

I’m trying to find a way that will add / update attribute using JavaScript. I know I can do it with setAttribute() function but that doesn’t work in IE.

4 Answers 4

You can read here about the behaviour of attributes in many different browsers, including IE.

element.setAttribute() should do the trick, even in IE. Did you try it? If it doesn’t work, then maybe element.attributeName = ‘value’ might work.

this works. it creates attribute if it doesn’t exists and updates it if it does exist. is this documented somewhere as far as how this works?

When I do the following: document.getElementById(«nav»).setAttribute(«class», «active»); it works in the Chrome JS console, but in the actual page it doesn’t work..any ideas? By the way, in the actual page I include the .js file before the end of the body scope.

What seems easy is actually tricky if you want to be completely compatible.

var e = document.createElement('div');

Let’s say you have an id of ‘div1’ to add.

e['id'] = 'div1'; e.id = 'div1'; e.attributes['id'] = 'div1'; e.createAttribute('id','div1')

These will all work except the last in IE 5.5 (which is ancient history at this point but still is XP’s default with no updates).

But there are contingencies, of course. Will not work in IE prior to 8: e.attributes[‘style’] Will not error but won’t actually set the class, it must be className: e[‘class’] .
However, if you’re using attributes then this WILL work: e.attributes[‘class’]

In summary, think of attributes as literal and object-oriented.

In literal, you just want it to spit out x=’y’ and not think about it. This is what attributes, setAttribute, createAttribute is for (except for IE’s style exception). But because these are really objects things can get confused.

Since you are going to the trouble of properly creating a DOM element instead of jQuery innerHTML slop, I would treat it like one and stick with the e.className = ‘fooClass’ and e.id = ‘fooID’. This is a design preference, but in this instance trying to treat is as anything other than an object works against you.

It will never backfire on you like the other methods might, just be aware of class being className and style being an object so it’s style.width not style=»width:50px». Also remember tagName but this is already set by createElement so you shouldn’t need to worry about it.

This was longer than I wanted, but CSS manipulation in JS is tricky business.

Источник

How to Add an Attribute to an HTML Tag

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

The HTML language includes a number of elements. These include commonly used website components like paragraphs, headings, links, and images. There are also a number of newer elements that were introduced with HTML5, including the header, nav, footer, and more. All of these HTML elements are used to create the structure of a document and give it meaning. To add even more meaning to elements, you can give them attributes.

A basic HTML opening tag starts with the < character. That is followed by the tag name, and finally, you complete the tag with the >character. For example, the opening paragraph tag would be written like this:

To add an attribute to your HTML tag, you first put a space after the tag name (in this case that is the «p»). Then you would add the attribute name that you wish to use followed by an equal sign. Finally, the attribute value would be placed in quotation marks. For example:

Tags can have multiple attributes. You would separate each attribute from the others with a space.

Elements With Required Attributes

Some HTML elements actually require attributes if you want them to work as intended. The image element and the link element are two examples of this.

The image element requires the «src» attribute. That attribute tells the browser which image you want to use in that location. The value of the attribute would be a file path to the image. For example:

You will notice that we added another attribute to this element, the «alt» or alternate text attribute. This is not technically a required attribute for images, but it is a best practice to always include this content for accessibility. The text listed in the value of the alt attribute is what will display if an image fails to load for some reason.

Another element that requires specific attributes is the anchor or link tag. This element must include the «href» attribute, which stands for ‘hypertext reference.» That is a fancy way of saying «where this link should go.» Just like the image element needs to know which image to load, the link tag must know where it should like to. Here is how a link tag may look:

That link would now bring a person to the website specified in the value of an attribute. In this case, it is the main page of Dotdash.

Attributes as CSS Hooks

Another use of attributes is when they are used as «hooks» for CSS styles. Because web standards dictate that you should keep your page’s structure (HTML) separate from its styles (CSS), you use these attribute hooks in the CSS to dictate how the structured page will display in the web browser. For instance, you could have this piece of markup in your HTML document.

If you wanted that division to have a background color of black (#000) and a font-size of 1.5em, you would add this to your CSS:

The «featured» class attribute acts as a hook that we use in the CSS to apply styles to that area. We could also use an ID attribute here if we wanted. Both classes and IDs are universal attributes, which means that they can be added to any element. They can also both be targeted with specific CSS styles to determine the visual appearance of that element.

Regarding Javascript

Finally, using attributes on certain HTML elements is also something you may use in Javascript. If you have a script that is looking for an element with a specific ID attribute, that is yet another use of this common piece of the HTML language.

Источник