Maison > interface Web > js tutoriel > le corps du texte

Comment définir la bordure div en javascript

青灯夜游
Libérer: 2021-06-30 17:36:41
original
7411 Les gens l'ont consulté

Comment définir la bordure div en JavaScript : utilisez d'abord "document.getElementById("ID value")" pour obtenir l'objet de balise div spécifié ; puis utilisez le "object.style.border="border width style" instruction color"" pour définir la bordure div.

Comment définir la bordure div en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Étapes pour définir la bordure div avec JavaScript :

  • Obtenir l'objet élément div

  • Utiliser l'objet Style L'attribut border définit la bordure

L'attribut border définit tous les attributs de bordure dans une seule instruction.

Syntaxe :

Object.style.border=borderWidth borderStyle borderColor
Copier après la connexion
< tr>
ValeurDescription Value
borderWidthDéfinit la largeur de la bordure.
    描述
    borderWidth设置边框的宽度。
    • thin
    • medium
    • thick
    • length
    borderStyle设置边框的样式。
    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
    borderColor设置边框的颜色。
    • color-name
    • color-rgb
    • color-hex
    • transparent
    fin

    moyen

    épais

    Comment définir la bordure div en javascriptlongueur

borderStyleDéfinissez le style de bordure.
    aucuncaché

    pointillé<🎜><🎜>tirets<🎜><🎜>solide<🎜><🎜>double< 🎜><🎜>rainure<🎜><🎜>crête<🎜><🎜>encart<🎜><🎜>début<🎜><🎜>
borderColorDéfinissez la couleur de la bordure.
    <🎜>nom-couleur<🎜><🎜>couleur-rgb<🎜><🎜>couleur-hex<🎜><🎜>transparent<🎜><🎜>
<🎜>Exemple : <🎜>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{ 
padding: 10px;
margin: 10px;
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("div1").style.border="thin dotted #FF0000";
}
</script>
</head>
<body>
<div id="div1">div元素,测试文本</div><br /><br />
<input type="button" onclick="changeBorder()" value="设置div边框" />
</body>
</html>
Copier après la connexion
Rendu : [Recommandations associées : JavaScript tutoriel d'apprentissage】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal