Как лучше изменять стили элемента с использованием JS?

Question

[Андрей Иванов]

Допустим я хочу создать функцию, которая, к примеру, изменяет размер шрифта в определенном классе.

Почему эта функция работает нормально:

function change () {
    let a = $('.classname') ;
    a.css ('font-size', '50px') ;
}

А эта не выполняет своих задач:

function change () {
    let a = $('.classname') ;
    a.style.fontSize = '50px' ;
}

Разве это не одно и тоже? В чем особенности и различия???

Answer 1

[Кирилл]

потому, что в переменной a содержится коллекция элементов с классом `classname` (массив), соответственно ваша функция должна выглядеть следующим образом:

function change () {
    let a = $('.classname') ;
    a[0].style.fontSize = '50px' ;
}

это, если требуется только у первого заменить свойство, если таких элементов много, то перебрать их через метод `.each()` коллекции `a` (https://api.jquery.com/each/)

Answer 2

[Vladislav]

Лучше на нативном.

Comments

[Vladislav]

Pardon Me! Where Do I Find 4giveness?, Я ответил на вопрос автора, а вопрос был таким: Как лучше изменять стили элемента с использованием JS.
Лучше, на нативном!

[Александр]

Pardon Me! Where Do I Find 4giveness?, Что что, а если есть возможность не тянуть с собой библиотеку, почему бы не воспользоваться ею?
Для Chrome, как пример, можно так:

const applyCSS = (element, rules) => {
	for (const rule in rules) {
		element.style.setProperty(rule, rules[rule]);
	}
}

applyCSS(document.body, {
	padding: CSS.px(32)
});

Для других браузеров можно данные в строке передавать, т. к. поддержка еще слабовата.

[Vladislav]

Pardon Me! Where Do I Find 4giveness?, чтобы динамично менять шрифт нужно подключать целую библиотеку ? Ну ты сказал конечно....