La propiedad Style outlineOffset se utiliza para desplazar un contorno y dibujarlo más allá del borde del borde.
Los contornos no ocupan espacio, a diferencia de los bordes. Devuelve una string que representa la propiedad de desplazamiento de contorno de un elemento.
Sintaxis:
- Para obtener la propiedad
object.style.outlineOffset
- Para establecer la propiedad
object.style.outlineOffset = "length|initial|inherit"
Valores de propiedad:
| Valor | Descripción |
|---|---|
| longitud | Defina la longitud en unidad de longitud. |
| inicial | definir el valor inicial que es predeterminado. |
| heredar | Heredar propiedad del elemento principal |
El siguiente programa ilustra el método de la propiedad Style outlineOffset:
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Style outlineOffset Property in HTML</title>
<style>
#samplediv {
margin: auto;
border: 2px green;
outline: coral solid 4px;
width: 250px;
height: 50px;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style outlineOffset Property</h2>
<br>
<p>For moving the ouline border outside the border edge, double click the "Change Outline Border" button: </p>
<br>
<button ondblclick="outline()">
Change Outline Border
</button>
<div id="samplediv">
<h1>Geeksforgeeks</h1>
</div>
<script>
function outline() {
document.getElementById("samplediv")
.style.outlineOffset = "20px";
}
</script>
</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 | La propiedad DOM Style outlineOffset se enumeran a continuación:
- explorador de Internet
- Google Chrome
- Firefox
- Ópera
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA