HTML | DOM MenuItem Object
Last Updated :
31 Aug, 2022
The DOM MenuItem Object is used to represent an HTML <menuitem> element. This tag defines the content and action for each menu item in the context menu. This can also be configured for certain types of input like checkboxes and radio buttons. Syntax:
- Accessing MenuItem Object
- Creating MenuItem Object
Note: The menuitem object is depreciated from HTML 5.
Properties:
- icon: This property sets or returns an image that can be used to represent the menu item.
- label: This property sets or returns the value of the label of the menu item. The label is the text that is shown to the user.
- type: This property sets or returns the value of the type of the menu item. This allows the menuitem to be changed to a checkbox or radio button.
- checked: This property sets or returns if the menu item should be checked by default.
- command: This property sets or returns the value of the command attribute of the menu item.
- disabled: This property sets or returns is the menu item should be disabled by default, making it unclickable.
- radiogroup: This property sets or returns the value of the radiogroup of the menu item. This is used to distinguish between groups of radio buttons.
- default: This property sets or returns is the menu item should be the default command. This can be used in submitting forms.
Example-1: Accessing MenuItem Object.
html
<!DOCTYPE html>
< html >
< head >
< title >
DOM menuItem Object
</ title >
< style >
.output {
border: 1px solid;
background-color: lightgreen;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksForGeeks
</ h1 >
< b >DOM menuItem Object</ b >
< div class="output"
contextmenu="menu1">
< p >Right-click inside this box to
see the context menu. This only
works in Firefox!
</ p >
< menu type="context"
id="menu1">
< menuitem id="menuitem-1"
label="Refresh"
onclick=
"window.location.reload();">
</ menuitem >
< menuitem id="menuitem-2"
label="Option 1"
type="checkbox" >
</ menuitem >
< menuitem id="menuitem-3 "
label="Option 2 "
type="checkbox">
</ menuitem >
</ menu >
</ div >
< button onclick="getMenuItem()">
Get menuItem
</ button >
< script >
function getMenuItem() {
var item =
document.getElementById('menuitem-1');
console.log(item);
}
</ script >
</ body >
</ html >
|
Output: Before clicking the button: After clicking the button: Example-2: Creating MenuItem Object.
html
<!DOCTYPE html>
< html >
< head >
< title >
DOM menuItem Object
</ title >
< style >
.output {
border: 1px solid;
background-color:
lightgreen;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksForGeeks
</ h1 >
< b >DOM menuItem Object</ b >
< div class="output"
contextmenu="menu1">
< p >
Right-click inside this
box to see the context menu.
This only works in Firefox!
</ p >
< menu type="context"
id="menu1">
< menuitem id="menuitem-1"
label="Refresh"
onclick=
"window.location.reload();">
</ menuitem >
< menuitem id="menuitem-2"
label="Option 1"
type="checkbox">
</ menuitem >
< menuitem id="menuitem-3"
label="Option 2"
type="checkbox">
</ menuitem >
</ menu >
</ div >
< button onclick="createMenuItem()">
Create menuItem
</ button >
< script >
function createMenuItem() {
var item =
document.createElement(
"MENUITEM");
item.label = "New Option";
document.querySelector(
'#menu1').appendChild(item);
}
</ script >
</ body >
</ html >
|
Output: Before clicking the button: After clicking the button: Supported Browsers:
Share your thoughts in the comments
Please Login to comment...