Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
113 views

How To Change HTML Object Element Data Attribute Value in Javascript - Stack Overflow

This document discusses how to change the data attribute value of an HTML <object> element using JavaScript. It provides examples of using setAttribute() to directly change the data attribute, as well as replacing the entire <object> element to indirectly change the attribute. Later responses also suggest using Element.dataset to change data attributes or jQuery's attr() method for a simpler approach.

Uploaded by

Erudite Q-fix
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

How To Change HTML Object Element Data Attribute Value in Javascript - Stack Overflow

This document discusses how to change the data attribute value of an HTML <object> element using JavaScript. It provides examples of using setAttribute() to directly change the data attribute, as well as replacing the entire <object> element to indirectly change the attribute. Later responses also suggest using Element.dataset to change data attributes or jQuery's attr() method for a simpler approach.

Uploaded by

Erudite Q-fix
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

How to change HTML Object element data attribute value in javascript

Asked
12 years, 1 month ago Modified
5 years, 6 months ago Viewed
135k times

How do you change HTML Object element data attribute value in JavaScript?

31 Here is what i am trying

<object type="text/html" id="htmlFrame" style="border: none;" standby="loading"


width="100%"></object>

var element = document.getElementById("htmlFrame");

element.setAttribute("data", "http://www.google.com");

javascript html object

Share Follow edited Jul 10, 2014 at 11:05 asked Jan 29, 2011 at 10:17
Sid M user587159
4,358 4 29 50 337 1 4 6

1 What have you tried? What didn't work? Can you post your HTML and javascript?
– Oded
Jan 29, 2011 at
10:23

Report this ad

Sorted by:
6 Answers
Highest score (default)

This works:

52
<html>

<head></head>

<body>

<object type="text/html" id="htmlFrame" style="border: none;" standby="loading"


width="100%"></object>

<script type="text/javascript">

var element = document.getElementById("htmlFrame");

element.setAttribute("data", "attributeValue");
</script>

</body>

</html>

If you put this in a file, open in it a web browser, the javascript will execute and and the "data"
attribute + value will be added to the object element.

Note: If you simply look at the HTML source, you wil NOT see the attribute. This is because the
browser is showing you the static source sent by the webserver, NOT the dynamically rendered
DOM. To inspect the DOM, use a tool like Firebug. This will show you what DOM the browser has
rendered, and you will be able to see the added attribute.

Using Firefox + Firebug or Google Chrome, you can right click on a part of a page and do "Inspect
Element". This will bring up a view of the rendered DOM.

Share Follow edited Jan 29, 2011 at 11:31 answered Jan 29, 2011 at 10:24
Richard H
37.5k 37 110 138

I have tried with those but no fruit , can you please post sample example that you have tested thanks
–  user587159
Jan 29, 2011 at 10:37

@user587159 - see my amended answer.


– Richard H
Jan 29, 2011 at 11:24

In JavaScript, you can assign values to data attributes through Element.dataset.

26 For example:

avatar.dataset.id = 12345;

Reference:
https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset

Share Follow edited Nov 1, 2016 at 7:39 answered Nov 1, 2016 at 6:30
jacefarm Vignesh Manogar
6,549 6 36 46 479 5 6
1 Excellent ! Exactly what i was looking for.
– electo
Nov 5, 2020 at 14:02

document.getElementById("PdfContentArea").setAttribute('data', path);

6
OR

var objectEl = document.getElementById("PdfContentArea")

objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path


+ '"');

Share Follow edited Sep 4, 2017 at 2:17 answered Sep 4, 2017 at 2:13
Robert Moskal Patrick Wong
21.4k 8 61 85 61 1 2

and in jquery:

2 $('element').attr('some attribute','some attributes value')

i.e

$('a').attr('href','http://www.stackoverflow.com/')

Share Follow answered Jan 29, 2011 at 10:28


WEBProject
1,307 5 16 31

48 This is jquery, not javascript.


– Wanjia
Jun 12, 2018 at 9:07

this works but when I want to change value again it doesn't work. for example : $ ('a') .attr ('data', 'http:
//www.stackoverflow.com/1.pdf') ok change again $ ('a') .attr ('href', 'http:
//www.stackoverflow.com/2.pdf') does not show. any suggestion. regards
– Alberto Lujan
May 31, 2021 at
23:18

The behavior of host objects <object> is due to ECMA262 implementation dependent and set
attribute by setAttribute() method may fail.
2
I see two solutions:

1. soft: element.data = "http://www.google.com";

2. hard: remove object from DOM tree and create new one with changed data attribute.
Share Follow edited Jul 9, 2014 at 14:26 answered Jul 9, 2014 at 14:03
drs user3283655
5,489 4 41 67 31 1

The following code works if you use jquery

-1 $( "object" ).replaceWith('<object data="http://www.google.com"></object>');

Share Follow answered Jun 1, 2016 at 14:45


Gertjan
499 4 5

You might also like