La propiedad borderRightColor nos permite establecer/obtener el color del borde derecho del elemento.
Sintaxis:
- Se utiliza para devolver la propiedad borderRightColor.
object.style.borderRightColor
- Se utiliza para devolver la propiedad borderRightColor.
object.style.borderRightColor = "color|transparent|initial|inherit"
Valor devuelto: la propiedad borderRightColor devuelve el color del borde derecho de un elemento.
Valores de propiedad:
- color: Especifica el color del borde derecho del elemento correspondiente. El negro es el color predeterminado.
- Sintaxis:
borderRightColor = "red"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
#GFG_Div {
width: 200px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "red";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón
- Antes de hacer clic en el botón
- Después de hacer clic en el botón
- Sintaxis:
borderRightColor = "yellow"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
#GFG_Div {
width: 200px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "yellow";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón
- Después de hacer clic en el botón
- transparente: Establece el color del borde derecho del elemento correspondiente a transparente.
- Sintaxis:
borderRightColor = "transparent"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
#GFG_Div {
width: 200px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "transparent";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón
- Después de hacer clic en el botón
- inicial: cuando no se especifica ningún valor para este campo, se hereda del padre del elemento. Si no hay padre significa que este elemento es raíz, entonces toma el valor inicial (o predeterminado).
- heredar: esta palabra clave aplica el valor inicial (o predeterminado) de una propiedad a un elemento. El valor inicial no debe confundirse con el valor especificado por la hoja de estilo del navegador. Cuando borderColor se establece en inicial, aparece el color negro (predeterminado).
Compatibilidad con navegadores: los navegadores compatibles con la propiedad DOM Style borderRightColor se enumeran a continuación:
- Google Chrome: compatible
- Internet Explorer: Compatible
- Firefox de Mozilla: Compatible
- Safari: compatible
- Ópera: Compatible
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA