web-dev-qa-db-fra.com

Comment modifier la valeur de l'attribut de données d'élément d'objet HTML en javascript

Comment modifiez-vous la valeur d'attribut de données d'élément d'objet HTML en JavaScript?

Voici ce que j'essaye 

<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

et en jquery:

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

c'est à dire

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

Cela marche:

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

Si vous mettez cela dans un fichier, ouvrez-y un navigateur Web, le javascript sera exécuté et l'attribut "data" + valeur sera ajouté à l'élément object.

Remarque:  Si vous regardez simplement la source HTML, vous ne verrez PAS l'attribut. En effet, le navigateur vous montre la source statique envoyée par le serveur Web, PAS le DOM rendu dynamiquement. Pour inspecter le DOM, utilisez un outil tel que Firebug . Cela vous montrera quel DOM le navigateur a rendu et vous pourrez voir l'attribut ajouté.

En utilisant Firefox + Firebug ou Google Chrome, vous pouvez cliquer avec le bouton droit de la souris sur une partie de la page et faire "Inspecter élément". Cela fera apparaître une vue du DOM rendu.

37
Richard H

En JavaScript, vous pouvez attribuer des valeurs aux attributs de données via Element.dataset.

Par exemple:

avatar.dataset.id = 12345;

Référence: https://developer.mozilla.org/en/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

Le comportement des objets hôtes <object> est dû à l'implémentation ECMA262 et l'attribut set by setAttribute() peut échouer.

Je vois deux solutions:

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

  2. hard: supprime l'objet de l'arborescence DOM et en crée un avec l'attribut de données modifié.

1
user3283655

Le code suivant fonctionne si vous utilisez jquery

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