Jak dynamicznie zmienić atrybut stylu elementu za pomocą JavaScript?

Model Object Document (DOM) zapewnia funkcję dynamicznego kontrolowania stylów w tworzeniu stron internetowych. Na przykład integruje się z JavaScript, aby zapewnić dostępność do modyfikacji właściwości elementów. Przydatne jest zmiana koloru, tła i rozmiaru tekstu w różnych aplikacjach w świecie rzeczywistym. W tym artykule zmienisz atrybuty stylu elementu, wykorzystując JavaScript.

Jak dynamicznie zmienić atrybut stylu elementu.

Łatwo jest zmodyfikować atrybut stylu elementu, stosując JavaScript. Funkcjonowanie tej konwersji są następujące. Po pierwsze, GetElementById jest wykorzystywany do dostępu do elementów obiektów dokumentów. Następnie tworzony jest przycisk, który występuje, jeśli klient naciśnie. Dlatego dostęp do właściwości określonego elementu, a użytkownik dynamicznie zmienia atrybut stylu elementu.

Składnia

element.styl.PropertyName = "PropertyValue";

Parametry

Opis parametrów jest następujący:

• Nazwa właściwości: Określa nazwę właściwości, takiej jak kolor, rozmiar czcionki itp.
• wartość nieruchomości: reprezentuje wartość, którą należy przypisać do właściwości elementu, e, g, „czerwony”.

Przykład

Przykład jest dostosowany do zmiany koloru tekstu, uzyskując dostęp do atrybutu stylu elementu. Kod podano poniżej, biorąc pod uwagę dynamiczną zmianę atrybutów stylu.

Kod

Przykład zmiany właściwości dynamicznych

Witamy w JavaScript World "

Opis kodu jest wyjaśniony w kolejności logicznej.

• Przycisk jest tworzony przez przekazanie wartości "Naciśnij przycisk".
• A "pressBtn ()”Metoda jest przymocowana do tego przycisku, który jest wyzwalany, gdy jest wywoływany.
• Następnie powyższa metoda „pressBtn ()”Jest napisane w obrębie tagi.
• W tej metodzie, Czyszczenie Zmienna jest wykorzystywana do zapisywania atrybutów elementu.
• Wreszcie atrybuty stylu tego elementu są dynamicznie zmieniane, gdy pressBtn () Metoda jest wywoływana.

Wyjście

Po naciśnięciu przycisku „Naciśnij przycisk”, pressBtn () Metoda jest uruchamiana, co dynamicznie zmienia atrybut stylu tego konkretnego elementu.

Wreszcie kolor czarnego tekstu „Witamy w JavaScript”Zmienia się na czerwony w przeglądarce, wykorzystując JavaScript pressBtn () metoda.

Wniosek:

Najpierw dostęp do elementu za pomocą getElementByID, a następnie dokument.styl.właściwość jest stosowana do zmiany atrybutu stylu elementu. Wreszcie, przycisk jest z nim powiązany, a po naciśnięciu tego przycisku styl elementu zmienia się. Ten artykuł pokazuje możliwą metodę konwersji atrybutu stylu w JavaScript.