Jak ustawić wymiary elementów HTML za pomocą JQuery

Właściwe ustawianie wymiarów elementów HTML jest bardzo znaczące podczas strukturyzacji układu strony internetowej, ponieważ odpowiednie wymiary zwiększają ogólny wygląd Twojej witryny, co w zamian zwiększa wrażenia użytkownika. JQuery zapewnia wiele metod, które pomagają z łatwością wykonywać to zadanie.

Wymiary elementów HTML można ustawić przy użyciu poniżej wspomnianych metod jQuery.

1. Metoda szerokości ()
2. metoda wysokości ()
3. metoda InnnerWidth ()
4. Metoda InnNerHeight ()
5. metoda zewnętrzna ()
6. metoda zewnętrzna ()

Zbadajmy je szczegółowo.

Metoda szerokości ()

W celu ustanowienia lub pobierania szerokości elementów HTML stosuje się metodę szerokości ().

Ta metoda działa w sposób, w jaki jest używana tylko do pobrania szerokości elementu, zwraca szerokość pierwszego dopasowanego elementu.

Składnia

Za pobranie szerokości elementu.

$ (selektor).szerokość()

Do ustawiania szerokości elementu.

$ (selektor).szerokość (wartość)

Przykład

Załóżmy, że chcesz zmienić szerokość elementu za pomocą metody jQuery Width (). Użyj poniższego kodu.

Html

Ustawiona szerokość

W powyższym kodzie HTML utworzyliśmy a i element. Ponadto daliśmy elementowi trochę stylu za pomocą CSS wbudowanego.

JQuery

$ (dokument).gotowy (funkcja ()
$ („#przycisk”).kliknij (funkcja ()
$ („div”).szerokość (500);
);
);

W tym kodzie jQuery stosuje się metodę Width () do ustawienia nowej szerokości elementu na 500px.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Szerokość elementu została zmieniona.

Metoda heigth ()

Ta metoda działa w podobny sposób do metody szerokości (), z oczywistą różnicą, że jest stosowana do podania lub przyniesienia wysokości elementów HTML.

Ta metoda działa również w sposób, w jaki jest używana tylko do pobrania wysokości elementu, wyodrębnia wysokość pierwszego elementu, który pasuje do określonego elementu, jednak przy ustawianiu wysokości ustawia wysokość wszystkich dopasowanych elementy.

Składnia

Do przyniesienia wysokości elementu.

$ (selektor).wysokość()

Do ustawiania wysokości elementu

$ (selektor).Wysokość (wartość)

Przykład

Załóżmy, że chcesz ustawić trochę wysokości elementu za pomocą metody jQuery Height (). Postępuj zgodnie z poniższym kodem.

Html

Wpisz swoje imię:


Wyświetl wysokość pola wejściowego

Tutaj utworzyliśmy pole wejściowe i ustawiliśmy wysokość 10px, szerokość 200px i koloru tła.

Ponadto ASLO utworzyliśmy przycisk.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („wejście”).wysokość (20);
);
);

Zastosowaliśmy tutaj metodę JQuery Height (), aby zmienić wysokość pola wejściowego. Wysokość zmieni się po kliknięciu przycisku.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Metoda wysokości () działa poprawnie.

metoda InnerWidth ()

W celu uzyskania wewnętrznej szerokości pierwszego elementu, który pasuje do określonego elementu, stosuje się metodę InnerWidth ().

Składnia

$ (selektor).InnerWidth ()

Przykład

Załóżmy, że chcesz wyświetlić wewnętrzną szerokość obrazu. Użyj następującego kodu.

Html

Wyświetl wewnętrzną szerokość obrazu

Tutaj wyświetliśmy obraz za pomocą znacznika, ponadto ustawiliśmy jego wysokość, szerokość, wyściółkę i granicę. Wraz z obrazem stworzyliśmy również przycisk, który zostanie użyty do wyświetlania wewnętrznej szerokości obrazu.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
Alert („Wewnętrzna szerokość obrazu:” + $ („IMG”).InnerWidth ());
);
);

W powyższym kodzie używamy metody InnerWidth () do wyświetlania wewnętrznej szerokości obrazu.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Wewnętrzna szerokość obrazu została wyświetlona.

Notatka: Metoda InnerWidth () obejmuje również wyściółkę podczas wyświetlania wewnętrznej szerokości elementu.

metoda innerheight ()

Metoda innerheight () służy do pobierania wewnętrznej wysokości pierwszego elementu, który pasuje do określonego elementu.

Składnia

$ (selektor).innerheight ()

Przykład

Użyjemy przykładu zastosowanego w powyższej sekcji, aby zrozumieć działanie metody jQuery innerheight ().

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
Alert („Wewnętrzna wysokość obrazu:” + $ („IMG”).innerheight ());
);
);

Zastosowaliśmy metodę InnerHeight () do wyodrębnienia wewnętrznej wysokości obrazu psa.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Metoda innerheight () działa poprawnie.

Notatka: Metoda InnerHeight () obejmuje również wyściółkę podczas wyświetlania wewnętrznej wysokości elementu.

metoda zewnętrzna ()

W celu uzyskania zewnętrznej szerokości pierwszego elementu, który pasuje do określonego elementu, stosuje się metodę OuterWidth ().

Składnia

$ (selektor).OUSTERWIDTH ()

Przykład

Załóżmy, że chcesz wyodrębnić zewnętrzną szerokość elementu DIV. Oto jak to robisz.

Html

Zewnętrzna szerokość div

Stworzyliśmy Div i biorąc pod uwagę pewien kolor tła, wysokość, szerokość, wyściółka i granica. Ponadto stworzyliśmy również przycisk.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
Alert („zewnętrzna szerokość div:„ + $ („div”).OUSTERWIDTH ());
);
);

Tutaj użyliśmy metody JQuery OuterWidth () do wyświetlania zewnętrznej szerokości elementu DIV.

Wyjście

Zanim przycisk zostanie kliknięty.

Po kliknięciu przycisku.

Metoda OuterWidth () działa poprawnie.

Notatka: Metoda OuterWidth () oblicza granicę wyściółki, a jednocześnie wyświetlają zewnętrzną szerokość elementu.

metoda zewnętrzna ()

Metoda zewnętrzna () służy do pobierania zewnętrznej wysokości pierwszego elementu, który pasuje do określonego elementu.

Składnia

$ (selektor).Outerheight ()

Przykład

Użyjemy przykładu zastosowanego w powyższej sekcji, aby zrozumieć działanie metody jQuery Outerheight ().

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
Alert („zewnętrzna wysokość div:” + $ („div”).euterheight ());
);
);

Zastosowaliśmy metodę Outerheight () do wyodrębnienia zewnętrznej wysokości elementu DIV.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Metoda OuterHeight () działa poprawnie.

Notatka: Metoda Outerheight () obejmuje również wyściółkę, a także granicę, jednocześnie wyświetlając zewnętrzną wysokość elementu.

Wniosek

Wymiary elementu HTML można ustawić przy użyciu różnych metod jQuery; szerokość (), wysokość (), innerWidth (), innerheight (), zewnętrzny () i zewnętrzny () (). Metody szerokości () i wysokości () ustawiają lub przynoszą odpowiednio szerokość i wysokość elementów. Podczas gdy metoda wewnętrzna (), wewnętrzna (), wewnętrzna (), zewnętrzna (), zewnętrzna () i zewnętrzna () i zewnętrzna wysokość, szerokość zewnętrzna i wysokość zewnętrzna i zewnętrzna wysokość pierwszych dopasowanych elementów. Wszystkie te metody zostały szczegółowo wyjaśnione wraz z odpowiednimi przykładami.