Bu gönderi, JavaScript kullanarak bir HTML öğesinde birden çok özniteliği ayarlama prosedürünü gösterecek.
JavaScript Kullanarak Bir Öğede Birden Çok Öznitelik Nasıl Ayarlanır?
Bir öğede aynı anda birden fazla nitelik ayarlamak için, önce nitelik adları ve değerleri ile bir nesne oluşturun. Nesnenin anahtarlarının bir listesini ' ile bir dizi olarak alın. Nesne.keys() ” yöntemi, ardından, belirtilen HTML öğesindeki tüm nitelikleri “ ile ayarlayın. setAttribute() ' yöntem.
Sözdizimi
setAttribute() yöntemi için verilen sözdizimi kullanılır:
eleman. setAttribute ( öznitelikAdı, öznitelikDeğeri ) ;
Yukarıdaki sözdizimi iki parametre içerir: ' isim ' ve ' değer ”.
- “ öznitelikAdı ”, yeni özelliğin adıdır.
- “ öznitelikDeğeri ”, yeni özelliğin değeridir.
- Bu metot yeni bir özellik yaratacak ve ona bir değer atayacaktır. Belirtilen öznitelik zaten varsa, değeri güncellenecektir.
Object.keys() yöntemi için verilen sözdizimini kullanın:
Nesne . anahtarlar ( nesne )Belirli bir nesnenin bir dizisini döndürür.
Örnek 1: setAttribute() Yöntemiyle forEach() Yöntemini Kullanarak Bir Öğede Birden Çok Nitelik Ayarlayın
İlk olarak, HTML dosyasında bir öğe oluşturun:
< düğme kimliği = 'buton' > LINUXHINT buton >Şu anda, web sayfası şöyle görünecektir:
JavaScript kodunda, önce “adında bir nesne oluşturun. eleman Öznitelikleri ” ve adları ve değerleri olan nitelikleri nesneye ekleyin. Burada, style niteliğini, öğenin adını ve button öğesi için disable özelliğini ekleyeceğiz:
sabit eleman Öznitelikleri = {stil : 'arka plan rengi: rgb(153, 28, 49); Beyaz renk;' ,
isim : 'Linux Düğmesi' ,
engelli : '' ,
} ;
Şimdi, “ adlı bir işlev tanımlayın. setMultipleAttributesonElement ” ilk olarak “ Nesne.keys() ” nesnenin anahtarlarının dizisini almak için yöntem ve ardından “ her biri için() ” diziyi yinelemek ve son olarak “ setAttribute() Belirtilen HTML öğesinin tüm tanımlı özniteliklerini ayarlama yöntemi.
işlev setMultipleAttributesonElement ( öğe, öğe Öznitelikleri ) {Nesne . anahtarlar ( eleman Öznitelikleri ) . her biri için ( bağlanmak => {
eleman. setAttribute ( öznitelik, elemAttributes [ bağlanmak ] ) ;
} ) ;
}
Düğmeyi, atanmış kimliğini kullanarak '' yardımıyla getirin. getElementById() ' yöntem:
sabit buton = belge. getElementById ( 'buton' ) ;Tanımlanan işlevi çağırın ' setMultipleAttributesonElement ” ve öğeyi ilk argüman olarak ve niteliklerin nesnesini ikinci argüman olarak iletin:
setMultipleAttributesonElement ( düğme, elementAttributes ) ;Çıktı, bir düğmenin birden çok özniteliğinin başarıyla eklendiğini gösterir:
Nitelikler için ayrı bir nesne oluşturmadan bir öğe üzerinde birden çok nitelik de ayarlayabilirsiniz. Bunu yapmak için aşağıdaki örneği izleyin.
Örnek 2: setAttribute() Yöntemiyle for Loop Kullanarak Bir Öğede Birden Çok Nitelik Ayarlayın
Bir JavaScript dosyasında iki parametreli bir işlev tanımlayın ve içinde birden çok öznitelik ayarlamak için bir for döngüsü kullanın. setAttribute() ' yöntem:
işlev setMultipleAttributesonElement ( öğe, öğe Öznitelikleri ) {için ( elemAttributes'a girmeme izin ver ) {
eleman. setAttribute ( i, elem Öznitelikleri [ i ] ) ;
}
}
Atanan kimliğini kullanarak düğmeyi alın:
sabit buton = belge. getElementById ( 'buton' ) ;Düğme öğesini ve çoklu nitelikleri ad-değer çiftleri biçiminde geçirerek tanımlanmış işlevi çağırın:
setMultipleAttributesonElement ( buton, { 'stil' : 'arka plan rengi: rgb(153, 28, 49); renk: beyaz;' , 'engelli' : '' , 'isim' : 'LinuxDüğmesi' } ) ;Çıktı
JavaScript kullanarak bir HTML öğesinde çoklu öznitelikleri ayarlamakla ilgili tüm temel bilgileri derledik.
Çözüm
JavaScript önceden tanımlanmış setAttribute() ” yöntemi, bir öğe için tek veya birden çok öznitelik ayarlamak için kullanılır. Bir öğede birden çok özniteliği ayarlamak için, önce adlar-değerler biçiminde öznitelikler içeren bir nesne oluşturun. “ kullanarak bir dizideki nesnelerin anahtarlarını alın. Nesne.keys() ” yöntemi, ardından belirtilen öğelerdeki tüm öznitelikleri “ ile ayarlayın. setAttribute() ' yöntem. Bu gönderide, JavaScript kullanarak bir HTML öğesinde birden çok öznitelik ayarlama prosedürünü gösterdik.