How to change HTML Object element data attribute value in javascript

by

This works:

<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.

More Related Contents:

  1. How to display image with JavaScript?
  2. Looping through localStorage in HTML5 and JavaScript
  3. Changing data content on an Object Tag in HTML
  4. How to get 100% ADA compliance result in accessibility checker website https://webaccessibility.com? [closed]
  5. jQuery doesn’t give a proper output, but gives these [closed]
  6. contenteditable change events
  7. Avoid dropdown menu close on click inside
  8. How to properly use jsPDF library
  9. How do I remove a file from the FileList
  10. How to get the element clicked (for the whole document)?
  11. How to clear the contents of an iFrame from another iFrame
  12. Prevent form redirect OR refresh on submit?
  13. How to Use Sockets in JavaScript\HTML? [closed]
  14. Reading cookie expiration date
  15. How to create a custom scrollbar on a div (Facebook style)
  16. jQuery: get data attribute
  17. ReactJS: “Uncaught SyntaxError: Unexpected token
  18. Web app in tvOS
  19. HTML book-like pagination
  20. Counting and limiting words in a textarea
  21. Writing file to desktop using HTML5 FileSystem API
  22. css position absolute making the textbox go down
  23. Proper way to reset a GIF animation with display:none on Chrome
  24. How can I prevent refresh of page when button inside form is clicked?
  25. Javascript Marquee to replace tags
  26. Passing JSON data from php to html-data attribute and then to Javascript
  27. iframe Auto Adjust Height as content changes
  28. Passing parameters to a JQuery function
  29. How to put a waved line under misspelled words HTML
  30. Validate Dynamically Added Input fields

Leave a Comment