如何在 javascript 中更改 HTML 对象元素数据属性值
Posted
技术标签:
【中文标题】如何在 javascript 中更改 HTML 对象元素数据属性值【英文标题】：How to change HTML Object element data attribute value in javascript 【发布时间】：2011-06-17 16:51:27 【问题描述】：如何在 javascript 中更改 html 对象元素的数据属性值？
这是我正在尝试的
<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" ></object>
var element = document.getElementById("htmlFrame");
element.setAttribute("data", "http://www.google.com");
【问题讨论】：
你试过什么？什么没用？你能发布你的 HTML 和 javascript 吗？ 【参考方案1】：document.getElementById("PdfContentArea").setAttribute('data', path);
或
var objectEl = document.getElementById("PdfContentArea")
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
【讨论】：
【参考方案2】：在 JavaScript 中，您可以通过 Element.dataset 为数据属性赋值。
例如：
avatar.dataset.id = 12345;
参考： https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset
【讨论】：
太棒了！正是我想要的。【参考方案3】：如果你使用 jquery，下面的代码可以工作
$( "object" ).replaceWith('<object data="http://www.google.com"></object>');
【讨论】：
【参考方案4】：主机对象<object> 的行为是由于ECMA262 实现依赖，setAttribute() 方法设置属性可能会失败。
我看到了两种解决方案：
软：element.data = "http://www.google.com";
hard：从 DOM 树中删除对象并创建具有更改数据属性的新对象。
【讨论】：
【参考方案5】：这行得通：
<html>
<head></head>
<body>
<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" ></object>
<script type="text/javascript">
var element = document.getElementById("htmlFrame");
element.setAttribute("data", "attributeValue");
</script>
</body>
</html>
如果你把它放在一个文件中，在其中打开一个网络浏览器，javascript将会执行，并且“数据”属性+值将被添加到对象元素中。
注意：如果您只是查看 HTML 源代码，您将看不到该属性。这是因为浏览器向您显示的是网络服务器发送的静态源，而不是动态呈现的 DOM。要检查 DOM，请使用Firebug 之类的工具。这将显示浏览器渲染的 DOM，并且您将能够看到添加的属性。
使用 Firefox + Firebug 或 Google Chrome，您可以右键单击页面的一部分并执行“检查元素”。这将打开渲染 DOM 的视图。
【讨论】：
我已经尝试过这些但没有结果，请您发布您测试过的示例，谢谢 @user587159 - 查看我修改后的答案。【参考方案6】：在 jquery 中：
$('element').attr('some attribute','some attributes value')
即
$('a').attr('href','http://www.***.com/')
【讨论】：
这是 jquery，不是 javascript。 这行得通，但是当我想再次更改值时它不起作用。例如： $ ('a') .attr ('data', 'http://www.***.com/1.pdf') ok 再次更改 $ ('a') .attr ('href', 'http : //www.***.com/2.pdf') 不显示。任何建议。问候以上是关于如何在 javascript 中更改 HTML 对象元素数据属性值的主要内容，如果未能解决你的问题，请参考以下文章
如何使用javascript动态更改html中svg的文本内容
Angular X - 如何更改 index.html 中已编译 JavaScript 文件的路径 [重复]
如何在 HTML 和 JS 文件中更改 Google Maps Javascript API 的地图 ID？