web-dev-qa-db-ja.com

JavaScriptでHTMLオブジェクト要素のデータ属性値を変更する方法

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");
javascripthtmlobject
18
user587159

そしてjqueryで：

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

すなわち

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

これは動作します：

<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」属性+値がオブジェクト要素に追加されます。

注意： HTMLソースを単純に見ると、属性は表示されません。これは、動的にレンダリングされたDOMではなく、ブラウザがWebサーバーによって送信された静的ソースを表示しているためです。 DOMを検査するには、 Firebug などのツールを使用します。これにより、ブラウザがレンダリングしたDOMが表示され、追加された属性を確認できます。

Firefox + FirebugまたはGoogle Chromeを使用して、ページの一部を右クリックし、「要素の検査」を実行できます。これにより、レンダリングされたDOMのビューが表示されます。

40
Richard H

JavaScriptでは、Element.datasetを使用してデータ属性に値を割り当てることができます。

例えば：

avatar.dataset.id = 12345;

リファレンス： https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset

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

OR

var objectEl = document.getElementById("PdfContentArea")

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

Hostオブジェクト_<object>_の動作は、ECMA262実装依存であり、setAttribute()メソッドによる属性の設定が失敗する可能性があるためです。

2つの解決策があります。

  1. ソフト：_element.data = "http://www.google.com";_

  2. hard：DOMツリーからオブジェクトを削除し、データ属性が変更された新しいオブジェクトを作成します。

1
user3283655

次のコードは、jqueryを使用すると機能します

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