web-dev-qa-db-de.com

So ändern Sie den HTML-Objektelement-Datenattributwert in Javascript

Wie ändern Sie den Wert eines HTML-Objektelement-Datenattributs in JavaScript?

Hier versuche ich es 

<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");
javascripthtmlobject
14
user587159

und in jquery:

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

d.h.

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

Das funktioniert:

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

Wenn Sie dies in einer Datei ablegen, öffnen Sie einen Webbrowser. Das Javascript wird ausgeführt und das Attribut "data" + value wird dem Objektelement hinzugefügt.

Hinweis:  Wenn Sie nur den HTML-Quellcode betrachten, wird das Attribut NICHT angezeigt. Dies liegt daran, dass der Browser Ihnen die statische Quelle anzeigt, die vom Webserver gesendet wird, NICHT das dynamisch gerenderte DOM. Verwenden Sie zum Überprüfen des DOM ein Tool wie Firebug . Dies zeigt Ihnen, was der Browser vom DOM gerendert hat, und Sie können das hinzugefügte Attribut sehen.

Mit Firefox + Firebug oder Google Chrome können Sie mit der rechten Maustaste auf einen Teil einer Seite klicken und "Element prüfen" ausführen. Dadurch wird eine Ansicht des gerenderten DOM angezeigt.

37
Richard H

In JavaScript können Sie Datenattributen über Element.dataset Werte zuweisen.

Zum Beispiel:

avatar.dataset.id = 12345;

Referenz: https://developer.mozilla.org/de/docs/Web/API/HTMLElement/dataset

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

OR

var objectEl = document.getElementById("PdfContentArea")

objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
2
Patrick Wong

Das Verhalten der Host-Objekte <object> hängt von der Implementierung der ECMA262 ab, und das gesetzte Attribut der setAttribute()-Methode schlägt möglicherweise fehl.

Ich sehe zwei Lösungen:

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

  2. hard: Entfernt das Objekt aus der DOM-Struktur und erstellt ein neues mit geändertem Datenattribut.

1
user3283655

Der folgende Code funktioniert, wenn Sie Jquery verwenden

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