Menu
Can I use a custom attribute in a script tag such as:
<script type="text/javascript" mycustomattribute="foo">
// JavaScript
</script>
And then use the contained JavaScript to access the value of mycustomattribute?
244
If you want to define your own custom attributes in HTML, you can implement them through data-* format. * can be replaced by any of your names to specify specific data to an element and target it in CSS, JavaScript, or jQuery.
A custom attribute is a property that you can define to describe assets. Custom attributes extend the meaning of an asset beyond what you can define with the standard attributes. You can create a custom attribute and assign to it a value that is an integer, a range of integers, or a string.
Attributes: Many attribute associated with script tag. async: It is used to specify the script is executed asynchronously. charset: It is used to specify the character encoding used in an external script file.
Can I use a custom attribute in a script tag such as:
Yes, using data-* attributes:
<script data-info="the information"...
And then use the contained javascript to access the value of 'mycustomattribute'?
Yes, probably. If you give the script tag an id, you can do it reliably:
var info = document.getElementById("theId").getAttribute("data-info");
Otherwise, you have to make assumptions about the script tag. If it's always in the markup of the page (not added later using code), you can do this:
var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");
That's because if the script tag is in the markup, it's run as soon as it's encountered (unless async or defer is used [and supported by the browser]), and will always be the last script tag on the page (at that point in time). But again, if code adds the script tag later, using createElement and appendChild or similar, you can't rely on that.
Here's a complete example: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Data on Script Tags</title>
</head>
<body>
<script>
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
</script>
<script data-info="first">
(function() {
var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");
display("Got info '" + info + "'");
})();
</script>
<script data-info="second">
(function() {
var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");
display("Got info '" + info + "'");
})();
</script>
</body>
</html>
Yes, you can do this. Browsers are required to ignore attributes they don't recognize in any tag (to allow for graceful degradation when a document uses new features with an old browser). However, it would be better to use a dataset tag, since these are explicitly reserved for users, so they don't conflict with future HTML changes.
<script id="myscript" type="text/javascript" data-mycustomattribute="foo">
You can then access this either using an ordinary attribute accessor:
document.getElementById("myscript").getAttribute("mycustomattribute")
or with the dataset API:
document.getElementById("myscript").dataset.mycustomattribute
(but see the browser compatibility table in the documentation).
28
You should be able to get it using jquery
$("script").attr("mycustomattribute");
Or try this using regular JavaScript
document.getElementsByTagName("script")[0].getAttribute("mycustomattribute");
Might bake sense to give a script tag an id to be able to do this
document.getElementById("someId").getAttribute("mycustomattribute");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
