DEV Community

Clavin June
Clavin June

Posted on • Originally published at on


Fetch Current Script Tag Attributes in Javascript

Photo by @markusspiske on Unsplash


Javascript is a language with thousands of users and modules. Every single thing that you think you may not want, it's there. Starts from a simple module like is-odd, jquery, until svelte. Javascript is a native way to do scripting in browser. Sometimes, you may need to create simple javascript module for your day to day works or maybe just for fun. To import your plain old javascript inside your HTML project, you can simply use the OG <script> tag. But, do you know that you can put custom attributes and access it inside your script?


For example, let's take a look at this script tag:

<script src=""
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
Enter fullscreen mode Exit fullscreen mode

Line 2 until 12 (data-repo until data-lang) are called dataset. It's a custom attributes that you can put to HTML elements. As long as you use data- as a prefix, it's considered as dataset. You can also put your custom elements/attributes without data- prefixed, but it's just an attribute, not dataset. Now, how do you fetch the attributes value?


Let's say you have index.js script that you import to your code like below:

Enter fullscreen mode Exit fullscreen mode

To access data-attr1, data-attr2, attr3, and attr4 you can do this inside index.js:

// fetch current script tag that import this script
const script = document.currentScript

const dataset = script.dataset
const attr1 = dataset.attr1
const attr2 = dataset.attr2

const attributes = script.attributes
const attr3 = attributes.getNamedItem('attr3').value
const attr4 = attributes.getNamedItem('attr4').value
Enter fullscreen mode Exit fullscreen mode

As for the dataset, the data- prefix will be removed. But for the rests, it is considered as common attributes just like src.


Now you can get your user input from attributes, just think of it like function arguments. It's simple and straightforward. Although you can choose between 2 methods above, I recommend you to use the dataset since it is more semantic than just a plain attribute.

Thank you for reading!

Latest comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!