Aseta elementille useita attribuutteja JavaScriptin avulla

Aseta Elementille Useita Attribuutteja Javascriptin Avulla



Attribuutit määrittävät HTML-elementin lisäominaisuuksia tai ominaisuuksia, kuten värin, leveyden, korkeuden ja niin edelleen. Jos haluat antaa elementille attribuutin, nimi-arvo-pareja, kuten ' nimi = arvo ”, käytetään silloin, kun määritteen arvo tulee laittaa lainausmerkkeihin. Jos haluat asettaa määritteen arvon määritetylle elementille, käytä ' Element.setAttribute() ”menetelmä.

Tämä viesti havainnollistaa menettelyä useiden määritteiden asettamiseen HTML-elementtiin JavaScriptin avulla.

Kuinka asettaa useita attribuutteja elementille JavaScriptin avulla?

Jos haluat määrittää elementille useita attribuutteja samanaikaisesti, luo ensin objekti, jossa on määritteiden nimet ja arvot. Hanki luettelo objektin avaimista taulukkona ' Object.keys() ' -menetelmää, aseta sitten kaikki määritetyn HTML-elementin attribuutit ' setAttribute() ”menetelmä.







Syntaksi



Annettua syntaksia käytetään setAttribute()-metodille:



elementti. setAttribute ( attrName, attrValue ) ;

Yllä oleva syntaksi sisältää kaksi parametria: ' nimi ' ja ' arvo ”.





  • ' attrName ” on uuden määritteen nimi.
  • ' attrValue ” on uuden määritteen arvo.
  • Tämä menetelmä luo uuden attribuutin ja antaa sille arvon. Jos määritetty attribuutti on jo olemassa, sen arvo päivitetään.

Käytä annettua syntaksia Object.keys()-metodille:

Esine . avaimet ( esine )

Se palauttaa tietyn objektin joukon.



Esimerkki 1: Aseta useita attribuutteja elementille käyttämällä forEach()-menetelmää setAttribute()-menetelmällä

Luo ensin elementti HTML-tiedostoon:

< painikkeen tunnus = 'painike' > LINUXHINT -painiketta >

Tällä hetkellä verkkosivu näyttää tältä:

JavaScript-koodissa luo ensin objekti nimeltä ' elementAttributes ” ja lisää attribuutit nimineen ja arvoineen objektiin. Lisäämme tähän tyyliattribuutin, elementin nimen ja painikeelementin disable-ominaisuuden:

konst elementAttributes = {

tyyli : 'taustaväri: rgb(153, 28, 49); väri valkoinen;' ,

nimi : 'LinuxButton' ,

liikuntarajoitteinen : '' ,

} ;

Määritä nyt funktio nimeltä ' setMultipleAttributesonElement 'jossa soita ensin' Object.keys() ' -menetelmää objektin avainten joukon saamiseksi ja käytä sitten ' jokaiselle() ' -menetelmä iteroidaksesi taulukon läpi ja kutsua lopuksi ' setAttribute() ” -menetelmää määrittääksesi kaikki määritetyt attribuutit määritetylle HTML-elementille.

function setMultipleAttributesonElement ( elementti, elementAttributes ) {

Esine . avaimet ( elementAttributes ) . jokaiselle ( attribuutti => {

elementti. setAttribute ( attribuutti, elemAttributes [ attribuutti ] ) ;

} ) ;

}

Hae painike käyttämällä sille määritettyä tunnusta '' getElementById() 'menetelmä:

konst -painiketta = asiakirja. getElementById ( 'painike' ) ;

Kutsu määritetty funktio ' setMultipleAttributesonElement ' ja välitä elementti ensimmäisenä argumenttina ja attribuuttien kohde toiseksi argumentiksi:

setMultipleAttributesonElement ( painike, elementAttributes ) ;

Tulos näyttää, että painikkeen useat attribuutit on lisätty onnistuneesti:

Voit myös määrittää elementille useita attribuutteja luomatta erillistä objektia määritteille. Voit tehdä tämän noudattamalla alla olevaa esimerkkiä.

Esimerkki 2: Aseta useita attribuutteja elementille käyttämällä silmukkaa setAttribute()-menetelmällä

Määritä funktio kahdella parametrilla JavaScript-tiedostossa ja käytä for-silmukkaa asettaaksesi sen sisällä useita attribuutteja kutsumalla ' setAttribute() 'menetelmä:

function setMultipleAttributesonElement ( elementti, elementAttributes ) {

varten ( anna minulle elemAttributes ) {

elementti. setAttribute ( i, elemAttributes [ i ] ) ;

}

}

Hae painike sille määritetyn tunnuksen avulla:

konst -painiketta = asiakirja. getElementById ( 'painike' ) ;

Kutsu määritetty funktio välittämällä painikeelementti ja useita attribuutteja nimi-arvo-parien muodossa:

setMultipleAttributesonElement ( painike, { 'tyyli' : 'taustaväri: rgb(153, 28, 49); väri: valkoinen;' , 'liikuntarajoitteinen' : '' , 'nimi' : 'LinuxButton' } ) ;

Lähtö

Olemme koonneet kaikki olennaiset tiedot, jotka liittyvät useiden attribuuttien asettamiseen HTML-elementtiin JavaScriptin avulla.

Johtopäätös

JavaScript ennalta määritetty setAttribute() ” -menetelmää käytetään määrittämään elementille yksi tai useampi attribuutti. Jos haluat asettaa elementille useita attribuutteja, luo ensin objekti, joka sisältää attribuutteja nimien-arvojen muodossa. Hanki taulukon objektien avaimet käyttämällä ' Object.keys() ' -menetelmää, aseta sitten kaikki määritetyt elementit määritteillä ' setAttribute() ”menetelmä. Tässä viestissä olemme havainnollistaneet menettelyä useiden attribuuttien määrittämiseksi HTML-elementille JavaScriptin avulla.