La propiedad DOM Style outlineColor se utiliza para establecer o devolver el color del contorno alrededor de un elemento.
Sintaxis:
- Se utiliza para devolver la propiedad outlineColor.
object.style.outlineColor
- se utiliza para establecer la propiedad outlineColor
object.style.outlineColor = "color|invert|initial|inherit"
Valores de propiedad:
- color: establece el color del contorno en cualquier color CSS válido.
- invertir: establece el color del contorno en un color que es inverso al del fondo, lo que garantiza que el contorno siempre estará visible. Nota: No es compatible con todos los navegadores.
- Heredar: establece el color del contorno de acuerdo con la propiedad de color del contorno heredada de su elemento principal.
Valor devuelto: Devuelve un valor de string que representa el color del contorno de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style outlineColor Property
</title>
<style>
#myDiv {
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<h2>HTML | DOM Style outlineColor Property</h2>
<div id="myDiv">Welcome to Geeks for Geeks.</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
// Set outline color.
document.getElementById("myDiv")
.style.outlineColor = "red";
}
</script>
</body>
</html>
Salida: antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style outlineColor Property
</title>
<style>
#myDiv {
border: 1px solid red;
outline: dotted thick;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<h2>HTML | DOM Style outlineColor Property</h2>
<div id="myDiv" style="outline-color:green;">
Welcome to Geeks for Geeks.</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
alert(document.getElementById(
"myDiv").style.outlineColor);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con DOM Style outlineColor Property se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 8 y superior
- Firefox 1.5 y superior
- Ópera 7 y superior
- Safari 1.2 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA