La propiedad de estilo borderBottomStyle en HTML DOM se usa para establecer o devolver el estilo del borde inferior de un elemento.
Sintaxis:
- Devuelve el estilo del borde inferior.
object.style.borderBottomStyle
- Establece el estilo del borde inferior.
border-bottom-style: value;
Valores de propiedad:
- ninguno: es el valor predeterminado y hace que el ancho del borde inferior sea cero. Por lo tanto, no es visible.
- oculto: se utiliza para hacer invisible el borde inferior. Es similar a ningún valor, excepto en el caso de resolución de conflictos de borde de los elementos de la tabla.
- dotted: Especifica el borde punteado.
- dashed: Especifica el borde discontinuo.
- solid: Especifica el borde sólido.
- double: Convierte el borde inferior en doble línea sólida. En este caso, el ancho del borde es igual a la suma de los anchos de los dos segmentos de línea y el espacio entre ellos.
- Groove: especifica un borde ranurado en 3D, pero este efecto depende del valor del color del borde.
- ridge: especifica un borde con estrías en 3D, pero este efecto depende del valor del color del borde.
- recuadro: especifica un borde insertado 3D, pero este efecto depende del valor del color del borde.
- salida: especifica un borde de salida 3D pero este efecto depende del valor del color del borde.
- initial: establece la propiedad borderBottomStyle en su valor predeterminado.
- heredar: Esto hereda la propiedad de su elemento padre.
Valor devuelto: Devuelve el borde inferior con el estilo seleccionado.
Ejemplo 1: este ejemplo describe el valor punteado de la propiedad borderBottomStyle.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderBottomStyle Property
</title>
<style>
div {
color: green;
text-align: center;
border: 4px solid green;
}
</style>
</head>
<body>
<div id = "main">
<h1>GeeksforGeeks.!</h1>
</div>
<br>
<input type = "button" value = "Click Me.!"
onclick = "geeks()" />
<script>
function geeks() {
document.getElementById("main").style.borderBottomStyle
= "dotted";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo describe el valor doble de la propiedad borderBottomStyle.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderBottomStyle Property
</title>
<style>
div {
color: green;
text-align: center;
border: 4px solid green;
}
</style>
</head>
<body>
<div id = "main">
<h1>GeeksforGeeks.!</h1>
</div>
<br>
<input type = "button" value = "Click Me.!"
onclick = "geeks()" />
<script>
function geeks() {
document.getElementById("main").style.borderBottomStyle
= "double";
}
</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 la propiedad borderBottomStyle del estilo DOM se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Ópera 9.2
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA