2011-01-29 19 views
11

¿Cómo se cambia el valor del atributo de datos del elemento HTML en JavaScript?Cómo cambiar el valor del atributo de datos del elemento HTML en javascript

Aquí es lo que estoy tratando

<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"); 
+0

¿Qué has intentado? ¿Qué no funcionó? ¿Puedes publicar tu HTML y javascript? – Oded

Respuesta

9

y en jquery:

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

es decir

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

Esto funciona:

<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 pones esto en un archivo, abierta en un navegador web, el código JavaScript se ejecutará y el y el " data "attribute + value" se agregará al elemento object.

Nota: Si simplemente mira la fuente HTML, NO verá el atributo. Esto se debe a que el navegador le muestra la fuente estática enviada por el servidor web, NO el DOM generado dinámicamente. Para inspeccionar el DOM, use una herramienta como Firebug. Esto le mostrará qué DOM ha renderizado el navegador, y podrá ver el atributo agregado.

Usando Firefox + Firebug o Google Chrome, puede hacer clic derecho en una parte de una página y hacer "Inspeccionar Elemento". Esto mostrará una vista del DOM renderizado.

+0

He intentado con esos pero no con la fruta, ¿podría por favor publicar ejemplos de muestra que haya probado? – user587159

+0

@ user587159 - vea mi respuesta corregida. –

1

El comportamiento de anfitrión objetos <object> es debido a ECMA262 dependiente de la implementación y establece atributo por setAttribute() método puede fallar.

veo dos soluciones:

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

  2. duros: Retire el objeto de árbol DOM y crear uno nuevo con atributo de datos modificados.

0

El siguiente código funciona si se utiliza jQuery

$("object").replaceWith('<object data="http://www.google.com"></object>'); 
0
document.getElementById("PdfContentArea").setAttribute('data', path); 

O

var objectEl = document.getElementById("PdfContentArea") 

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