使用 JavaScript 设置自定义属性 [英] Set custom attribute using JavaScript
问题描述
我正在使用 The DynaTree (https://code.google.com/p/dynatree),但我遇到了一些问题,希望有人能提供帮助..
我在页面上显示树,如下所示:
<ul><li class="文件夹">输出<ul><li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title<li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title<li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title<li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
但是,我试图更改项目上的图标,无论它是否被选中或不只使用 JavaScript.
我要使用的新图标是 base2.gif
我尝试使用以下方法,但似乎不起作用:
document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";
有人知道我做错了什么吗?
使用setAttribute
方法:
document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");
但您确实应该使用数据后跟破折号及其属性,例如:
并在 JS 中使用 dataset
属性:
document.getElementById('item1').dataset.icon = "base.gif";
I am using The DynaTree (https://code.google.com/p/dynatree) but I am having some problems and hoping someone can help..
I am displaying the tree on the page like below:
<div id="tree">
<ul>
<li class="folder">Outputs
<ul>
<li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
<li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
<li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
<li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
</ul>
</ul>
</div>
However I am trying to change the icon on a item no matter if it's selected or not only using JavaScript.
the new icon I want to use is base2.gif
I have tried using the following but it don't seem to work:
document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";
anyone know what I might be doing wrong?
Use the setAttribute
method:
document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");
But you really should be using data followed with a dash and with its property, like:
<li ... data-icon="base.gif" ...>
And to do it in JS use the dataset
property:
document.getElementById('item1').dataset.icon = "base.gif";
这篇关于使用 JavaScript 设置自定义属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!