Question

如何在JavaScript中更改HTML对象元素数据属性值？

这是我正在尝试的

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

Answer 1

这有效：

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

如果你把它放在一个文件中，在它上面打开一个Web浏览器，javascript就会执行，而“data”属性+值将被添加到object元素中。

注意：如果您只是查看HTML源代码，则不会看到该属性。这是因为浏览器向您显示Web服务器发送的静态源，而不是动态呈现的DOM。要检查DOM，请使用Firebug之类的工具。这将显示浏览器呈现的DOM，您将能够看到添加的属性。

使用Firefox + Firebug或Google Chrome，您可以右键单击页面的一部分并执行“检查元素”。这将显示渲染的DOM的视图。

Answer 2

并在jquery中：

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

即

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

Answer 3

在JavaScript中，您可以通过Element.dataset为数据属性赋值。

例如：

avatar.dataset.id = 12345;

参考： https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset

Answer 4

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

OR

var objectEl = document.getElementById("PdfContentArea")

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

Answer 5

主机对象<object>的行为是由于依赖于ECMA262实现，而setAttribute()方法设置属性可能会失败。

我看到两个解决方案：

soft：element.data = "http://www.google.com";
hard：从DOM树中删除对象并创建具有已更改数据属性的新对象。

Answer 6

如果您使用jquery

，以下代码可以正常工作

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

如何在javascript中更改HTML对象元素数据属性值

6 个答案: