HTML-elementin luokan muuttaminen JavaScriptin avulla

Mia Chevalier

Torstai 27. kesäkuuta 2024 klo 14.05.43

Luokkien päivittäminen JavaScriptillä
JavaScript tarjoaa tehokkaita työkaluja dynaamiseen vuorovaikutukseen HTML-elementtien kanssa ja niiden käsittelemiseen. Yksi yleinen tehtävä on muuttaa HTML-elementin luokkaa vastauksena tapahtumiin, kuten onclick.
Tämä opas näyttää, kuinka JavaScriptin avulla voit muuttaa elementin luokkaa, mikä mahdollistaa dynaamiset tyyli- ja käyttäytymismuutokset verkkosivuillasi. Vastaatpa sitten painikkeen napsautukseen tai muuhun tapahtumaan, nämä tekniikat parantavat verkkokehitystaitojasi.

Komento Kuvaus

className Asettaa tai palauttaa elementin class-attribuutin. Käytetään elementin luokan vaihtamiseen.

getElementById Palauttaa elementin, jolla on ID-attribuutti määritetyllä arvolla. Käytetään painikeelementin valitsemiseen.

onclick Asettaa toiminnon, joka suoritetaan, kun elementissä tapahtuu napsautustapahtuma.

removeClass Poistaa yhden tai useamman luokan nimen valituista jQueryn elementeistä.

addClass Lisää yhden tai useamman luokan nimen valittuihin elementteihin jQueryssa.

$ jQueryn alias, jota käytetään elementtien valitsemiseen ja toimien suorittamiseen niille.

Komento	Kuvaus
className	Asettaa tai palauttaa elementin class-attribuutin. Käytetään elementin luokan vaihtamiseen.
getElementById	Palauttaa elementin, jolla on ID-attribuutti määritetyllä arvolla. Käytetään painikeelementin valitsemiseen.
onclick	Asettaa toiminnon, joka suoritetaan, kun elementissä tapahtuu napsautustapahtuma.
removeClass	Poistaa yhden tai useamman luokan nimen valituista jQueryn elementeistä.
addClass	Lisää yhden tai useamman luokan nimen valittuihin elementteihin jQueryssa.
$	jQueryn alias, jota käytetään elementtien valitsemiseen ja toimien suorittamiseen niille.

JavaScript-luokan manipuloinnin ymmärtäminen

Toimitetut skriptit osoittavat, kuinka HTML-elementin luokkaa muutetaan JavaScriptin ja jQueryn avulla vastauksena napsautustapahtumaan. Ensimmäisessä skriptissä käytetään tavallista JavaScriptiä tämän toiminnon saavuttamiseksi. The menetelmää käytetään valitsemaan painikeelementti, jonka tunnus on "myButton". The Tapahtuma määritetään sitten tälle elementille, joka määrittää toiminnon, joka suoritetaan, kun painiketta napsautetaan. Tämän toiminnon sisällä on painike ominaisuus asetetaan arvoon "muutettu", mikä muuttaa sen luokkaa ja myöhemmin sen tyyliä CSS:ssä määritetyllä tavalla. Tämä skripti esittelee tehokkaasti pelkän JavaScriptin käytön yksinkertaisuuden ja suoruuden DOM-manipulaatioon.

Toinen komentosarja havainnollistaa samoja toimintoja käyttämällä jQueryä, suosittua JavaScript-kirjastoa, joka yksinkertaistaa HTML-dokumenttien läpikulkua ja käsittelyä. Tässä jQuery-alias käytetään painikeelementin valitsemiseen. The menetelmää sovelletaan sitten tapahtumakäsittelijän määrittämiseen napsautustapahtumalle. Tässä käsittelijässä painikkeen luokkaa muokataan jQueryn avulla ja addClass menetelmiä. Nämä menetelmät tarjoavat kätevän tavan manipuloida elementin luokkia tarjoten luettavamman ja tiiviimmän lähestymistavan tavalliseen JavaScriptiin verrattuna. Molemmat skriptit pyrkivät osoittamaan, kuinka eri työkaluilla voidaan saavuttaa sama tavoite eli muuttaa elementin luokkaa dynaamisesti käyttäjän vuorovaikutuksen perusteella.

Elementin luokan muuttaminen napsauttamalla JavaScriptin avulla

JavaScript ja HTML

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class Example</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script>
  document.getElementById('myButton').onclick = function() {
    this.className = 'changed';
  };
</script>
</body>
</html>

HTML-elementin luokan päivittäminen jQueryn avulla

JavaScript ja jQuery

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class with jQuery</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#myButton').click(function() {
    $(this).removeClass('original').addClass('changed');
  });
</script>
</body>
</html>

Kehittyneet tekniikat luokan manipulointiin JavaScriptissä

Tapahtumiin perustuvien luokkamuutosten lisäksi JavaScript tarjoaa edistyneempiä tekniikoita elementin luokkaluettelon muokkaamiseen. Yksi tällainen menetelmä on omaisuutta, joka tarjoaa joustavamman ja tehokkaamman tavan työskennellä luokkien kanssa. The ominaisuus palauttaa elävän DOMTokenList-kokoelman elementin luokkaattribuuteista. Käyttämällä , voit lisätä, poistaa, vaihtaa ja tarkistaa luokkia vaikuttamatta muihin luokkiin, joita saatetaan soveltaa elementtiin.

Esimerkiksi, -menetelmää voidaan käyttää yhden tai useamman luokan lisäämiseen elementtiin, kun taas menetelmä voi poistaa yhden tai useamman määritetyn luokan. The -menetelmä on erityisen hyödyllinen, koska se lisää luokan, jos sitä ei ole, ja poistaa sen, jos on, mikä tekee siitä ihanteellisen tehtäviin, kuten pimeän tilan vaihtojen toteuttamiseen. Lisäksi, contains -menetelmä tarkistaa, sisältääkö elementti tietyn luokan, mikä voi olla hyödyllistä tyylejen tai käyttäytymisen ehdolliseen soveltamiseen elementin nykyiseen tilaan perustuen.

Kuinka lisään elementtiin useita luokkia?
Käytä menetelmä useilla argumenteilla: .
Voinko poistaa kaikki luokat elementistä?
Kyllä, voit käyttää ominaisuus ja aseta se tyhjäksi merkkijonoksi: .
Mitä eroa on ja ?
asettaa tai saa koko luokkaattribuutin, kun taas mahdollistaa luokkien tarkemman manipuloinnin.
Kuinka tarkistan, onko elementillä tietty luokka?
Käytä menetelmä: .
Kuinka voin vaihtaa luokkaa elementissä?
Käytä menetelmä: .
Voinko käyttää jQueryä luokkien manipulointiin?
Kyllä, jQuery tarjoaa menetelmiä, kuten , , ja .
Mikä on live DOMTokenList?
A on live-kokoelma, joka päivittyy automaattisesti, kun elementin class-attribuutti muuttuu.
On tuettu kaikissa selaimissa?
on tuettu kaikissa nykyaikaisissa selaimissa, mutta Internet Explorerin vanhemmat versiot eivät välttämättä tue sitä täysin.
Kuinka voin lisätä luokkia dynaamisesti ehtojen perusteella?
Voit käyttää lausunnot yhdessä tai hakea luokat ehdollisesti.

Dynaamisten luokkamuutosten keskeiset tekniikat

HTML-elementin luokan manipulointi JavaScriptin tai jQueryn avulla tarjoaa yksinkertaisen tavan päivittää elementin tyyliä ja käyttäytymistä dynaamisesti. Ymmärtämällä ja hyödyntämällä menetelmiä, kuten , , ja jQueryn luokan manipulointimenetelmien avulla kehittäjät voivat parantaa verkkosivujensa interaktiivisuutta ja reagointikykyä, mikä tekee niistä kiinnostavampia käyttäjille.