Овај пост ће илустровати процедуру за постављање вишеструких атрибута на ХТМЛ елемент користећи ЈаваСцрипт.
Како поставити више атрибута на елемент користећи ЈаваСцрипт?
Да бисте поставили више атрибута на елемент истовремено, прво направите објекат са именима и вредностима атрибута. Добијте листу кључева објекта као низ са „ Објецт.кеис() ”, затим, подесите све атрибуте на наведеном ХТМЛ елементу помоћу „ сетАттрибуте() ” метод.
Синтакса
Дата синтакса се користи за метод сетАттрибуте():
елемент. сетАттрибуте ( аттрНаме, аттрВалуе ) ;
Горња синтакса садржи два параметра: „ име ' и ' вредност ”.
- “ аттрНаме ” је назив новог атрибута.
- “ аттрВалуе ” је вредност новог атрибута.
- Овај метод ће креирати нови атрибут и доделити му вредност. Ако наведени атрибут већ постоји, његова вредност ће се ажурирати.
Користите дату синтаксу за метод Објецт.кеис():
Објекат . кључеви ( објекат )Враћа низ датог објекта.
Пример 1: Подесите више атрибута на елемент помоћу методе форЕацх() са методом сетАттрибуте()
Прво направите елемент у ХТМЛ датотеци:
< дугме ид = 'дугме' > ЛИНУКСХИНТ дугме >Тренутно ће веб страница изгледати овако:
У ЈаваСцрипт коду прво направите објекат под називом „ елементАттрибутес ” и додајте објекту атрибуте са именима и вредностима. Овде ћемо додати атрибут стила, име елемента и својство онемогућавања за елемент дугмета:
конст елементАттрибутес = {стил : 'бацкгроунд-цолор: ргб(153, 28, 49); бела боја;' ,
име : 'ЛинукБуттон' ,
онеспособљени : '' ,
} ;
Сада дефинишите функцију под називом „ сетМултиплеАттрибутесонЕлемент ” где прво позовите „ Објецт.кеис() ” метод за добијање низа кључева објекта, а затим користите „ за сваки() ” за понављање низа и коначно позивање „ сетАттрибуте() ” за постављање свих дефинисаних атрибута на наведеном ХТМЛ елементу.
функција сетМултиплеАттрибутесонЕлемент ( елемент, елементАтрибути ) {Објекат . кључеви ( елементАттрибутес ) . за сваки ( атрибут => {
елемент. сетАттрибуте ( атрибут, елемАттрибутес [ атрибут ] ) ;
} ) ;
}
Преузмите дугме користећи додељени ИД уз помоћ „ гетЕлементБиИд() ” метод:
конст дугме = документ. гетЕлементБиИд ( 'дугме' ) ;Позовите дефинисану функцију “ сетМултиплеАттрибутесонЕлемент ” и проследите елемент као први аргумент, а објекат атрибута као други аргумент:
сетМултиплеАттрибутесонЕлемент ( дугме, елементАтрибути ) ;Излаз показује да су вишеструки атрибути дугмета успешно додати:
Такође можете поставити више атрибута на елемент без креирања посебног објекта за атрибуте. Да бисте то урадили, следите пример у наставку.
Пример 2: Подесите више атрибута на елемент користећи фор петљу са методом сетАттрибуте()
Дефинишите функцију са два параметра у ЈаваСцрипт датотеци и користите фор петљу да поставите више атрибута унутар ње тако што ћете позвати „ сетАттрибуте() ” метод:
функција сетМултиплеАттрибутесонЕлемент ( елемент, елементАтрибути ) {за ( нека и у елемАттрибутес ) {
елемент. сетАттрибуте ( и, елемАттрибутес [ и ] ) ;
}
}
Преузмите дугме користећи додељени ИД:
конст дугме = документ. гетЕлементБиИд ( 'дугме' ) ;Позовите дефинисану функцију преношењем елемента дугмета и више атрибута у облику парова име-вредност:
сетМултиплеАттрибутесонЕлемент ( дугме, { 'стил' : 'боја позадине: ргб(153, 28, 49); боја: бела;' , 'инвалид' : '' , 'име' : 'ЛинукБуттон' } ) ;Излаз
Сакупили смо све битне информације везане за постављање вишеструких атрибута на ХТМЛ елемент помоћу ЈаваСцрипт-а.
Закључак
ЈаваСцрипт унапред дефинисан сетАттрибуте() ” метода се користи за постављање једног или више атрибута за елемент. Да бисте поставили више атрибута на елемент, прво креирајте објекат који садржи атрибуте у облику имена-вредности. Узмите кључеве објеката у низу користећи „ Објецт.кеис() ”, а затим поставите све атрибуте на наведене елементе помоћу „ сетАттрибуте() ” метод. У овом посту смо илустровали процедуру за постављање више атрибута на ХТМЛ елемент користећи ЈаваСцрипт.