Javascript 如何在javascript中更改HTML对象元素数据属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4836290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change HTML Object element data attribute value in javascript
提问by user587159
How do you change HTML Object element data attribute value in JavaScript?
如何在 JavaScript 中更改 HTML 对象元素数据属性值？
Here is what i am trying
这是我正在尝试的
<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");
采纳答案by WEBProject
and in jquery:
在 jquery 中：
$('element').attr('some attribute','some attributes value')
i.e
IE
$('a').attr('href','http://www.stackoverflow.com/')
回答by Richard H
This works:
这有效：
<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>
If you put this in a file, open in it a web browser, the javascript will execute and and the "data" attribute + value will be added to the object element.
如果你把它放在一个文件中，在其中打开一个 Web 浏览器，javascript 将执行，并且“数据”属性+值将被添加到对象元素中。
Note: If you simply look at the HTML source, you wil NOT see the attribute. This is because the browser is showing you the static source sent by the webserver, NOT the dynamically rendered DOM. To inspect the DOM, use a tool like Firebug. This will show you what DOM the browser has rendered, and you will be able to see the added attribute.
注意：如果您只查看 HTML 源代码，您将看不到该属性。这是因为浏览器向您展示了网络服务器发送的静态源，而不是动态呈现的 DOM。要检查 DOM，请使用Firebug 之类的工具。这将向您显示浏览器呈现的 DOM，您将能够看到添加的属性。
Using Firefox + Firebug or Google Chrome, you can right click on a part of a page and do "Inspect Element". This will bring up a view of the rendered DOM.
使用 Firefox + Firebug 或 Google Chrome，您可以右键单击页面的一部分并执行“检查元素”。这将显示渲染的 DOM 的视图。
回答by Vignesh Manogar
In JavaScript, you can assign values to data attributes through Element.dataset.
在 JavaScript 中，您可以通过 Element.dataset 为数据属性赋值。
For example:
例如：
avatar.dataset.id = 12345;
Reference: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset
参考：https: //developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset
回答by Patrick Wong
document.getElementById("PdfContentArea").setAttribute('data', path);
OR
或者
var objectEl = document.getElementById("PdfContentArea")
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
回答by user3283655
The behavior of host objects <object>is due to ECMA262 implementation dependent and set attribute by setAttribute()method may fail.
宿主对象的行为<object>取决于 ECMA262 实现，并且按setAttribute()方法设置属性可能会失败。
I see two solutions:
我看到两种解决方案：
soft:
element.data = "http://www.google.com";hard: remove object from DOM tree and create new one with changed data attribute.
柔软的：
element.data = "http://www.google.com";困难：从 DOM 树中删除对象并创建具有更改数据属性的新对象。
回答by Gertjan
The following code works if you use jquery
如果您使用 jquery，以下代码有效
$( "object" ).replaceWith('<object data="http://www.google.com"></object>');
