La propiedad maxWidth establece/devuelve el ancho máximo de un elemento. La propiedad maxWidth afecta solo a elementos a nivel de bloque, elementos de posición absoluta o fija.
Sintaxis:
- Devuelve la propiedad maxWidth.
object.style.maxWidth
- Establece la propiedad maxWidth.
object.style.maxWidth = "none|length|%|initial|inherit"
Valores:
| Valor | Descripción |
|---|---|
| ninguna | Valor predeterminado sin ningún límite en el ancho del elemento |
| longitud | Definir el valor máximo de ancho en unidad de longitud |
| % | Defina el valor máximo del ancho en % del elemento principal |
| inicial | Establecer propiedad a su valor predeterminado |
| heredar | Heredar de su elemento padre |
Valor devuelto: Devuelve el ancho máximo del elemento.
Ejemplo-1: Establecer ancho en unidad de longitud.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style maxWidth Property </title>
</head>
<style>
#Geek1 {
color: white;
width: 300px;
background: green;
}
</style>
<body>
<center>
<h1 id="Geek1">
GeeksForGeeks
</h1>
<h2>DOM Style maxWidth Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
<script>
function mygeeks() {
// set width using length unit.
document.getElementById(
"Geek1").style.maxWidth = "220px";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Establecer ancho en ‘%’.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style maxWidth Property </title>
</head>
<style>
#Geek1 {
color: white;
width: 50%;
background: green;
}
#Geek_Center {
background: yellow;
width: 400px;
margin-left: 150px;
}
</style>
<body>
<center id="Geek_Center">
<h3 id="Geek1">
GeeksForGeeks
</h3>
<h2>DOM Style maxWidth Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
<script>
function mygeeks() {
// Set width using % .
document.getElementById(
"Geek1").style.maxWidth = "35%";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: El navegador compatible con HTML | Las propiedades DOM Style maxWidth se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 7 y superior
- Mozilla Firefox 1 y superior
- Ópera 4 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA