La propiedad borderLeftColor nos permite establecer/obtener el color del borde izquierdo del elemento.
Sintaxis:
- Se utiliza para devolver la propiedad borderLeftColor.
object.style.borderLeftColor
- Se utiliza para devolver la propiedad borderLeftColor.
object.style.borderLeftColor = "color|transparent|initial| inherit"
Valor devuelto: la propiedad borderLeftColor devuelve el color del borde izquierdo de un elemento.
Valores de propiedad:
- color: Especifica el color del borde del elemento correspondiente. El negro es el color predeterminado.
- Sintaxis:
borderLeftColor = "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 left 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.borderLeftColor = "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:
borderLeftColor = "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 left 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.borderLeftColor = "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 del elemento correspondiente a transparente.
- Sintaxis:
borderLeftColor = "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 left 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.borderLeftColor = "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 borderLeftColor se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA