如何在javascript中更改HTML對象元素數據屬性值

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

要么

var objectEl = document.getElementById("PdfContentArea")

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

Answer 5

主機對象<object>的行為是由於依賴於ECMA262實現，而setAttribute()方法的set屬性可能會失敗。

我看到兩個解決方案：

soft： element.data = "http://www.google.com";
hard：從DOM樹中刪除對象並創建具有已更改數據屬性的新對象。

Answer 6

如果您使用jquery，以下代碼可以正常工作

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

如何在javascript中更改HTML對象元素數據屬性值

問題描述

6 個解決方案

解決方案1
40 2011-01-29 10:24:13

解決方案2
11 已采納 2011-01-29 10:28:55

解決方案3
5 2016-11-01 06:30:47

解決方案4
3 2017-09-04 02:13:03

解決方案5
1 2014-07-09 14:03:46

解決方案6
0 2016-06-01 14:45:14

如何在javascript中更改HTML對象元素數據屬性值

問題描述

6 個解決方案

解決方案1 40 2011-01-29 10:24:13

解決方案2 11 已采納 2011-01-29 10:28:55

解決方案3 5 2016-11-01 06:30:47

解決方案4 3 2017-09-04 02:13:03

解決方案5 1 2014-07-09 14:03:46

解決方案6 0 2016-06-01 14:45:14

解決方案1
40 2011-01-29 10:24:13

解決方案2
11 已采納 2011-01-29 10:28:55

解決方案3
5 2016-11-01 06:30:47

解決方案4
3 2017-09-04 02:13:03

解決方案5
1 2014-07-09 14:03:46

解決方案6
0 2016-06-01 14:45:14