El objeto DOM MenuItem se utiliza para representar un elemento HTML <menuitem> . Esta etiqueta define el contenido y la acción de cada elemento del menú en el menú contextual. Esto también se puede configurar para ciertos tipos de entrada, como casillas de verificación y botones de opción.
Sintaxis:
- Acceso al objeto MenuItem
var item = document.getElementById("menuItem");
var item = document.createElement("MENUITEM");
Propiedades:
- icon: esta propiedad establece o devuelve una imagen que se puede usar para representar el elemento del menú.
- etiqueta: Esta propiedad establece o devuelve el valor de la etiqueta del elemento del menú. La etiqueta es el texto que se muestra al usuario.
- type: Esta propiedad establece o devuelve el valor del tipo del elemento del menú. Esto permite cambiar el elemento del menú a una casilla de verificación o un botón de radio.
- verificado: esta propiedad establece o devuelve si el elemento del menú debe verificarse de manera predeterminada.
- comando: esta propiedad establece o devuelve el valor del atributo de comando del elemento de menú.
- disabled: esta propiedad establece o devuelve si el elemento del menú debe estar deshabilitado de forma predeterminada, por lo que no se puede hacer clic.
- grupo de radio: esta propiedad establece o devuelve el valor del grupo de radio del elemento de menú. Esto se utiliza para distinguir entre grupos de botones de opción.
- predeterminado: esta propiedad establece o devuelve si el elemento del menú debe ser el comando predeterminado. Esto se puede utilizar en el envío de formularios.
Ejemplo-1: Acceso al objeto MenuItem.
<!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>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: Crear objeto MenuItem.
<!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>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles:
- Mozilla Firefox
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA