Comment ajouter de la largeur aux éléments dans jquery-Questions et réponses frontales-php.cn

Comment ajouter de la largeur aux éléments dans jquery

青灯夜游

Libérer： 2022-09-27 17:42:59

original

2673 Les gens l'ont consulté

Trois méthodes : 1. Utilisez width() pour définir la largeur de l'élément, la syntaxe est "$(selector).width(new value)", la nouvelle valeur est plus grande que la valeur de largeur d'origine. 2. Utilisez css() pour définir une nouvelle valeur pour l'attribut width de l'élément, avec la syntaxe "$(selector).css("width","new value")". 3. Utilisez attr() pour contrôler l'attribut de style et définir un nouveau style de largeur pour l'élément. La syntaxe est "$(selector).attr("style","width: new value")".

Comment ajouter de la largeur aux éléments dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Méthode 1 : utilisez la fonction width() pour augmenter la largeur

width() est une fonction intégrée qui opère sur la largeur des éléments et peut renvoyer ou définir la largeur des éléments correspondants.

Passez les paramètres à width() pour définir la largeur de tous les éléments correspondants.

$(selector).width(length)

Copier après la connexion

Paramètres	Description
longueur	Facultatif. Spécifie la largeur de l'élément. Si aucune unité de longueur n'est spécifiée, l'unité px par défaut est utilisée.

Paramètres

Description

longueur

Facultatif. Spécifie la largeur de l'élément.

Si aucune unité de longueur n'est spécifiée, l'unité px par défaut est utilisée.

Exemple : Augmentez la largeur de l'élément d'image

La valeur du paramètre width() doit être définie plus grande que la largeur d'origine.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").width("200px");
                });
            });
        </script>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="Comment ajouter de la largeur aux éléments dans jquery" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

Copier après la connexion

Comment ajouter de la largeur aux éléments dans jquery

Méthode 2 : utilisez la fonction css() pour augmenter la largeur

css() est une fonction intégrée qui opère sur les attributs d'élément et peut renvoyer ou définir un ou plusieurs attributs de style de l'élément correspondant.

Utilisez simplement css() pour définir une nouvelle valeur pour l'attribut width de l'élément (la nouvelle valeur est plus grande que l'ancienne valeur).

Exemple : Augmentez la largeur de l'élément p

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("p").width("350px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <p>测试段落</p>
        <button>增加p元素的宽度</button>
    </body>
</html>

Copier après la connexion

Comment ajouter de la largeur aux éléments dans jquery

Méthode 3 : Utilisez la fonction attr() pour augmenter la largeur

La méthode attr() définit ou renvoie la valeur d'attribut de l'élément sélectionné élément.

Il vous suffit d'utiliser attr() pour contrôler la valeur de l'attribut de style et définir un nouveau style de largeur pour l'élément (la nouvelle valeur est plus grande que l'ancienne valeur).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").attr("style","width:250px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="Comment ajouter de la largeur aux éléments dans jquery" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

Copier après la connexion

Comment ajouter de la largeur aux éléments dans jquery