Maison > Article > interface Web > javascript définir la bordure

javascript définir la bordure

WBOYoriginal: 2023-05-16 10:43:072411parcourir

JavaScript est un langage de programmation puissant et flexible qui peut être utilisé pour créer des sites Web interactifs et ajouter plus de fonctions et de créativité au site Web. Dans cet article, nous apprendrons comment styliser les bordures des éléments d'un site Web à l'aide de JavaScript.

La définition des styles de bordure est l'un des moyens les plus courants de modifier l'apparence d'une page Web. Cette fonction peut être bien réalisée en utilisant les styles CSS, mais nous devons parfois définir des bordures sur les éléments de page Web générés dynamiquement, puis nous devons utiliser JavaScript.

Il existe deux manières principales de définir le style de bordure d'un élément en JavaScript : en utilisant l'attribut style et en utilisant classList.

Utilisez l'attribut style pour définir la bordure

En JavaScript, c'est une méthode très courante pour utiliser l'attribut style pour manipuler le style d'un élément. Nous pouvons changer le style d'un élément en définissant l'attribut style sur l'élément et en attribuant une valeur.

Comme indiqué ci-dessous, nous allons créer un simple document HTML contenant un bouton. Lorsque l'utilisateur clique sur le bouton, nous utiliserons JavaScript pour définir la couleur et la largeur de la bordure du bouton.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript设置边框</title>
    <style>
        button {
            padding: 20px;
            font-size: 20px;
            background-color: navy;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <button onclick="setBorder()">设置边框</button>
    <script>
        function setBorder() {
            var button = document.getElementsByTagName("button")[0];
            button.style.border = "5px solid yellow";
        }
    </script>
</body>
</html>

Dans le code ci-dessus, nous avons défini un élément bouton dans le document HTML. Lorsque l'utilisateur clique sur le bouton, nous utilisons JavaScript pour obtenir l'élément et définir la couleur et la largeur de sa bordure. Dans la fonction setBorder, nous utilisons la méthode document.getElementsByTagName pour obtenir l'élément bouton dans la page et utilisons l'attribut style pour définir le style de bordure.

Utilisez classList pour définir les bordures

classList est un attribut très utile en JavaScript, qui nous permet d'ajouter, de supprimer et de changer facilement la classe d'un élément. En ajoutant des classes, nous pouvons définir différents styles d'éléments, y compris des styles de bordure.

Comme indiqué ci-dessous, nous allons à nouveau créer un document HTML contenant deux boutons. Lorsque l'utilisateur clique sur le premier bouton, nous ajouterons une classe au deuxième bouton en utilisant JavaScript. Cette classe définira le style de bordure du bouton.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript设置边框</title>
    <style>
        button {
            padding: 20px;
            font-size: 20px;
            background-color: navy;
            color: white;
            border: none;
        }
        .border {
            border: 5px solid yellow;
        }
    </style>
</head>
<body>
    <button onclick="addBorder()">添加边框</button>
    <button onclick="resetBorder()">重置边框</button>
    <script>
        function addBorder() {
            var button = document.getElementsByTagName("button")[1];
            button.classList.add("border");
        }
        function resetBorder() {
            var button = document.getElementsByTagName("button")[1];
            button.classList.remove("border");
        }
    </script>
</body>
</html>

Dans le code ci-dessus, nous définissons deux éléments de bouton. Lorsque l'utilisateur clique sur le premier bouton, nous ajoutons une classe de bordure au deuxième bouton à l'aide de classList. Cette classe de bordure est définie dans le style CSS et possède une bordure jaune de 5 pixels. Lorsque l'utilisateur clique sur le deuxième bouton, nous utilisons la méthode classList pour supprimer la classe border du deuxième bouton, réinitialisant ainsi le style de bordure.

Résumé

Définir le style de bordure des éléments de page Web en JavaScript est un besoin très courant. En utilisant l'attribut style ou la méthode classList, nous pouvons facilement implémenter cette fonction pour ajouter plus de créativité et de fonctionnalités à la page Web. Bien que les exemples ci-dessus soient relativement simples, ces méthodes peuvent être appliquées à diverses situations, vous permettant de maîtriser facilement davantage de compétences en conception Web.

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!

Déclaration：

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

Article précédent：Touche de raccourci de fermeture JavaScriptArticle suivant：Touche de raccourci de fermeture JavaScript

Articles Liés

Voir plus