Ang post na ito ay maglalarawan ng pamamaraan upang itakda ang maramihang mga katangian sa isang HTML na elemento gamit ang JavaScript.
Paano Magtakda ng Maramihang Mga Katangian sa isang Elemento Gamit ang JavaScript?
Upang magtakda ng maraming attribute sa isang elemento nang sabay-sabay, gumawa muna ng object na may mga pangalan at value ng attribute. Kumuha ng listahan ng mga susi ng object bilang array na may ' Object.keys() ” paraan, pagkatapos, itakda ang lahat ng mga katangian sa tinukoy na elemento ng HTML na may “ setAttribute() ” paraan.
Syntax
Ang ibinigay na syntax ay ginagamit para sa setAttribute() na pamamaraan:
elemento. setAttribute ( attrName, attrValue ) ;
Ang syntax sa itaas ay naglalaman ng dalawang parameter: “ pangalan 'at' halaga ”.
- “ attrName ” ang pangalan ng bagong katangian.
- “ attrValue ” ay ang halaga ng bagong katangian.
- Ang pamamaraang ito ay lilikha ng isang bagong katangian at magtatalaga ito ng isang halaga. Kung umiiral na ang tinukoy na katangian, maa-update ang halaga nito.
Gamitin ang ibinigay na syntax para sa Object.keys() na pamamaraan:
Bagay . mga susi ( bagay )Nagbabalik ito ng array ng isang ibinigay na bagay.
Halimbawa 1: Magtakda ng Maramihang Mga Katangian sa isang Elemento Gamit ang Paraan ng forEach() Gamit ang Paraan ng setAttribute()
Una, lumikha ng isang elemento sa HTML file:
< button id = 'button' > LINUXHINT pindutan >Sa kasalukuyan, magiging ganito ang hitsura ng web page:
Sa JavaScript code, una, lumikha ng isang bagay na pinangalanang ' elementAttributes ” at idagdag ang mga katangian na may mga pangalan at halaga sa bagay. Dito, idaragdag namin ang style attribute, ang pangalan ng elemento, at ang disable property para sa button na elemento:
const elementAttributes = {istilo : 'kulay ng background: rgb(153, 28, 49); kulay puti;' ,
pangalan : 'LinuxButton' ,
may kapansanan : '' ,
} ;
Ngayon, tukuyin ang isang function na pinangalanang ' setMultipleAttributesonElement 'kung saan unang tumawag sa' Object.keys() 'paraan para sa pagkuha ng hanay ng mga susi ng bagay at pagkatapos ay gamitin ang ' forEach() 'paraan upang umulit sa array at sa wakas ay tawagan ang ' setAttribute() ” paraan upang itakda ang lahat ng tinukoy na katangian sa tinukoy na elemento ng HTML.
function setMultipleAttributesonElement ( elemento, elementAttributes ) {Bagay . mga susi ( elementAttributes ) . para sa bawat ( katangian => {
elemento. setAttribute ( attribute, elemAttributes [ katangian ] ) ;
} ) ;
}
Kunin ang button gamit ang nakatalagang id nito sa tulong ng “ getElementById() 'paraan:
const pindutan = dokumento. getElementById ( 'button' ) ;I-invoke ang tinukoy na function na ' setMultipleAttributesonElement ” at ipasa ang elemento bilang unang argumento at ang object ng mga katangian bilang pangalawang argumento:
setMultipleAttributesonElement ( button, elementAttributes ) ;Ang output ay nagpapakita na ang maramihang mga katangian ng isang pindutan ay matagumpay na naidagdag:
Maaari ka ring magtakda ng maraming katangian sa isang elemento nang hindi gumagawa ng hiwalay na bagay para sa mga katangian. Upang gawin ito, sundin ang halimbawa sa ibaba.
Halimbawa 2: Magtakda ng Maramihang Mga Katangian sa isang Elemento Gamit ang para sa Loop Gamit ang Paraan ng setAttribute().
Tukuyin ang isang function na may dalawang parameter sa isang JavaScript file at gumamit ng for loop para magtakda ng maraming attribute sa loob nito sa pamamagitan ng pagtawag sa “ setAttribute() 'paraan:
function setMultipleAttributesonElement ( elemento, elementAttributes ) {para sa ( hayaan mo ako sa elemAttributes ) {
elemento. setAttribute ( ako, elemAttributes [ i ] ) ;
}
}
Kunin ang button gamit ang nakatalagang id nito:
const pindutan = dokumento. getElementById ( 'button' ) ;Tawagan ang tinukoy na function sa pamamagitan ng pagpasa sa elemento ng button at maraming attribute sa anyo ng mga pares ng name-value:
setMultipleAttributesonElement ( pindutan, { 'estilo' : 'kulay ng background: rgb(153, 28, 49); kulay: puti;' , 'may kapansanan' : '' , 'pangalan' : 'LinuxButton' } ) ;Output
Pinagsama-sama namin ang lahat ng mahahalagang impormasyon na nauugnay sa pagtatakda ng maraming katangian sa isang elemento ng HTML gamit ang JavaScript.
Konklusyon
Ang JavaScript ay paunang natukoy setAttribute() Ang paraan ng ” ay ginagamit upang magtakda ng isa o maramihang katangian para sa isang elemento. Upang itakda ang maraming katangian sa isang elemento, lumikha muna ng isang bagay na naglalaman ng mga katangian sa anyo ng mga pangalan-halaga. Kunin ang mga susi ng mga bagay sa isang array gamit ang ' Object.keys() ” na pamamaraan, pagkatapos ay itakda ang lahat ng mga katangian sa tinukoy na mga elemento na may “ setAttribute() ” paraan. Sa post na ito, inilarawan namin ang pamamaraan upang magtakda ng maraming mga katangian sa isang elemento ng HTML gamit ang JavaScript.