HTML DOM Menuitem 对象

HTML 对象 <menuitem> 是用于定义菜单中的一个项目。它通常用于创建上下文菜单或右键菜单。

属性

• type: 指定菜单项的类型，可以是 command、checkbox、radio 或 submenu。
• label: 指定菜单项的显示文本。
• icon: 指定菜单项的图标。
• disabled: 指定菜单项是否禁用。
• checked: 指定菜单项是否被选中。

示例代码

<menu type="context" id="contextMenu">
  <menuItem label="Cut" icon="cut.png" onclick="cutFunction()"></menuItem>
  <menuItem label="Copy" icon="copy.png" onclick="copyFunction()"></menuItem>
  <menuItem label="Paste" icon="paste.png" onclick="pasteFunction()"></menuItem>
</menu>

在上面的示例中，我们创建了一个上下文菜单，并添加了三个菜单项：Cut、Copy 和 Paste。每个菜单项都有一个标签和一个图标，并且分别绑定了相应的点击事件处理函数。

使用方法

可以通过 JavaScript 来动态创建和操作 <menuitem> 对象。例如，可以通过以下代码将一个新的菜单项添加到现有菜单中：

var newMenuItem = document.createElement('menuItem');
newMenuItem.label = 'New Item';
newMenuItem.icon = 'new.png';
newMenuItem.onclick = function() {
  alert('You clicked on the new item!');
};
document.getElementById('contextMenu').appendChild(newMenuItem);

这样就可以在现有的上下文菜单中添加一个名为 "New Item" 的新菜单项，并在点击时弹出一个提示框。

总结