How To Get Attribute Javascript vs Jquery vs css

Hello all on this occasion I will share how to print or retrieve the value of the attribute with javascript and jquery and css

This is my first coding tutorial, I usually share more ready-made widget tutorials that you just copy and paste.

What are Attributes?

Attribute is a special word that is in the opening tag, such as class and id href and others are called attributes.

besides that we can also add our own attributes with any words or names such as data-end data-text etc. We can freely define any name we like.

The following is an example of an attribute below, what I marked is what is meant by attribute.

<div class='iniClass' id='iniId' data-text='hello piki'>belajar attribute</div>

Get Attribute Dengan Javascript

now we will try to print or retrieve the value that is in the data-text attribute , namely hello piki with javascript

// we must select the class or id that is in the same package as the attribute we want to print

//here I will select by id i.e. (iniId)

//create a variable with any name you like, here I give it a name (Print variable)

varPrintvariable = document.querySelector('#iniId').getAttribute('data-text');

// now we print with alert just call the variable we created above
alert(Print variable);
// output hello piki

Get Attribute With Css

Unlike javascript and jquery, we are free to print attribute values ​​wherever we like, while this css can only be printed in the same packaging using css before or after.

.iniClass::after{
  /* hasil output hello wendy */
  content:attr(data-text);
  display:block;
  margin:5px auto;
  color:#f89000;
  font-weight:600
  }

Conclusion

This tutorial is just the basics, the rest goes back to yourself how you create it as needed, ok so that's the tutorial on how to print or retrieve values ​​from attributes with javascript and jquery and css, hopefully it will be useful.