La propiedad de borde de estilo DOM se utiliza para establecer o devolver el estilo del borde de un elemento. Podemos establecer el estilo diferente del borde para lados individuales (superior, derecho, inferior, izquierdo). La propiedad de estilo de borde puede tomar múltiples valores para cada lado.
Sintaxis:
- Se utiliza para devolver la propiedad de estilo.
object.style.borderStyle
- Se utiliza para establecer la propiedad de estilo.
object.style.borderStyle = value
Valores de propiedad de estilo de borde DOM
- ninguno: no se crea ningún borde y se deja plano
- oculto: Al igual que Ninguno, no muestra ningún borde a menos que se agregue una imagen de fondo, entonces el ancho superior del borde se establecerá en 0 independientemente del valor definido por el usuario.
- punteado: una serie de puntos se muestran en una línea como borde.
- sólido: se utiliza una sola línea sólida y en negrita como borde.
- discontinua: una serie de líneas discontinuas cuadradas se utilizan como borde.
- doble: dos líneas colocadas paralelas entre sí actúan como borde.
- surco: muestra un borde ranurado en 3D, su efecto depende del valor del color del borde.
- ridge: muestra un borde con estrías en 3D, su efecto depende del valor del color del borde.
- recuadro: muestra un borde insertado en 3D, su efecto depende del valor del color del borde.
Valor devuelto: Devuelve un valor de string que representa el estilo del borde de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 39px;
}
#GFG {
border: thick solid coral;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM Style border Property.</h2>
<div id="GFG">
<p>GeeksForGeeks.</p>
<p>A Computer Science Portal for geeks.</p>
</div>
<br>
<button type="button" onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
// Return the style property.
document.getElementById("GFG").style.borderStyle =
"dashed dotted double solid";
}
</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>
<style>
h1 {
color: green;
font-size: 39px;
}
#GFG {
width: 70%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM Style border Property.</h2>
<div id="GFG">
<p>GeeksForGeeks.</p>
<p>A Computer Science Portal for geeks.</p>
</div>
<br>
<button type="button" onclick="myGeeks()">
Submit
</button>
<script>
function myGeeks() {
// Return the dotted style border.
document.getElementById("GFG").style.borderStyle =
" dotted ";
}
</script>
</body>
</html>
Salida: 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 de borde de estilo DOM se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 3.5 y superior
- Safari 1 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