La propiedad borderTopColor nos permite establecer/obtener el color del borde superior del elemento.
Sintaxis:
- Devuelve la propiedad borderTopColor.
object.style.borderTopColor
- Se utiliza para establecer la propiedad borderTopColor.
object.style.borderTopColor = "color|transparent|initial| inherit"
Valor devuelto: la propiedad borderTopColor devuelve el color del borde superior de un elemento.
Valores de propiedad:
- color: Especifica el color del borde superior del elemento correspondiente. El negro es el color predeterminado.
- Sintaxis:
borderTopColor = "red"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderTopColor Property
</title>
<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.borderTopColor = "red";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón
- Después de hacer clic en el botón
- Sintaxis:
borderTopColor = "yellow"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderTopColor Property
</title>
<style>
#GFG_Div {
width: 200px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<p>
Click to change the top 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.borderTopColor = "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 superior del elemento correspondiente en transparente.
- Sintaxis:
borderTopColor = "transparent"
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderTopColor Property
</title>
<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.borderTopColor = "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 borderTopColor 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