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>

我想运行一个返回一些值的函数并将其放在data-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设置data-select1属性

function a(x) {

    var el = document.getElementById('element1')
	
    // 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

我建议使用dataset。

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

如果您需要支持IE 8+，另一种选择是直接通过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()。我借了一些@Kevin Jantzer的代码（我不能发表评论，大声笑）。

function a(x) {

    var el = document.getElementById('element1');
	
    // 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>

将函数的结果插入div属性

4 个答案: