div属性への関数の結果の挿入

Question

私はHTMLとJavaScriptを完全に新しくしています。私は3Dmol.jsを使用する必要があるので、私はチュートリアルに続いて、私は、コードの作業部分を持っている：

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> 
 

 
<div id="element1" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1a5j' data-backgroundcolor='0xffffff' data-style='cartoon' data-select1='resi:10' data-style1='stick:color=0x00FFFF'> 
 
</div>

私はいくつかの値を返し、データにそれを置く機能を実行したいと思います-select1 = 'resi：x'、xはこの値です。

<script> 
    function a(x) { 
    return x; 
} 
</script> 

私が実行してあれば：

a(2); 

へのdivの変更：

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> 
 

 
    <div id="element1" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1a5j' data-backgroundcolor='0xffffff' data-style='cartoon' data-select1='resi:2' data-style1='stick:color=0x00FFFF'> 
 
    </div>

それを行うための最も簡単な方法は何ですか？

Answer 1

使用HTMLElement.dataset私はdatasetを使用することをお勧めしたいdata-select1属性

function a(x) { 
 

 
    var el = document.getElementById('element1') 
 
\t 
 
    // will set `data-select1` 
 
    el.dataset.select1 = 'resi:'+x 
 

 
    return x; 
 
} 
 

 
a(2);

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> 
 

 
<div id="element1" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1a5j' data-backgroundcolor='0xffffff' data-style='cartoon' data-select1='resi:10' data-style1='stick:color=0x00FFFF'> 
 
</div>

Answer 2

を設定します。

function a(x){ 
    var element1 = document.getElemenyById('element1'); 
    if (element1) element1.dataset.select1 = "resi:" + x; 
} 

あなたは8+ IEをサポートするためにsetAttributeを介して直接行く必要がある場合は、代替。データセットhereのブラウザの互換性を確認してください。

function a(x){ 
    var element1 = document.getElemenyById('element1'); 
    if (element1) element1.setAttribute("data-select1:", "resi:" + x); 
} 

Answer 3

これを試してみてください：

<script> 
    function a(x) { 
     $('#element1').data('select1','resi:'+x); 
     console.log($('#element1').data('select1')); 
} 
</script> 

Answer 4

データセットは素晴らしいですが、ブラウザのサポートはまあまあです。 getAttribute()も使用できます。 @ケビン・ジャンツァーのコードを借りた（私はまだコメントを残すことができない）。

function a(x) { 
 

 
    var el = document.getElementById('element1'); 
 
\t 
 
    // will set `data-select1` 
 
    el.getAttribute('data-select1' == 'resi:' + x); 
 

 
    return x; 
 
} 
 

 
console.log(a(2));

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> 
 

 
<div id="element1" style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='1a5j' data-backgroundcolor='0xffffff' data-style='cartoon' data-select1='resi:10' data-style1='stick:color=0x00FFFF'> 
 
</div>