Как поменять свойство css через js
Перейти к содержимому

Как поменять свойство css через js

  • автор:

Курсы javascript

Для изменения нужно использовать каскадность стилей.
Вот небольшая демонстрация.

       --> .test   

Простой текст

Текст для экспериментов

02.08.2019, 16:23
Новичок на форуме
Регистрация: 02.08.2019
Сообщений: 5
проблема в том что я не селен в Javascript а времени нет
02.08.2019, 16:31
Регистрация: 19.08.2010
Сообщений: 14,109
Зачем тогда взялся за это дело?
02.08.2019, 16:40
Новичок на форуме
Регистрация: 02.08.2019
Сообщений: 5

так сложилась ситуация,
сейчас нет возможности учить,
всего лишь при нажатии должно поменяться
position: sticky; на position: fixed;

Стиль элемента

Javacript позволяет значительно изменить элемент страницы. В том числе, можно изменить стиль элемента с помощью JavaScript. Можно изменить значения CSS-свойств, которые уже установлены, а также добавить другие CSS-саойства. Это делается через свойство style , которое есть у DOM-объектов. Само это свойство является объектом, который содержит CSS-свойства элемента. Чтобы установить определённое CSS-свойство, нужно обратиться к соответствующему свойству объекта style .

Имена CSS-свойств совпадают с именами свойств объекта, только пишутся немного по-другому. Если имя свойства состоит из нескольких слов, то в CSS для разделения слов используется дефис. А свойства объекта пишутся по обычным правилам JavaScript, то есть новое слово начинается с большой буквы.

Значением свойства всегда является строка. Значения пишутся так же, как в CSS.

Для примера создадим блок, которому будем устанавлявать свойства:

Текст

Теперь установим этому блоку свойство padding :

let block = document.getElementById('block'); block.style.padding = '10px';

Попробуйте установить блоку другие свойства.

Свойство cssText удаляет все свойства объекта style и заменяет их своими. Значением этого свойства является строка, в которой может быть указано несколько свойств по всем правилам CSS. Для примера создадим ещё один блок, зададим ему свойство, а затем заменим его другими свойствами.

Другой блок
let newBlock = document.getElementById('newblock'); newBlock.style.marginTop = '10px'; newBlock.style.cssText = 'color: Green; font-size: 40px';

Отступ сверху у блока отменён, вместо этого появились другие свойства. А вот рамка у блока осталась, ведь она задана не в объекте style , а с помощью селектора.

Есть ещё один способ изменения стиля — через классы. В стиле создаётся новый класс, ему указываются нужные свойства. А в скрипте объетку просто присваивается этот класс и объект получает свойства класса.

Получение стиля

Элемент страницы не всегда получает CSS-свойства в таком виде, как они написаны. Есть свойства, которые созданы для краткого указания отступов и рамки для всех сторон блока. Например, свойство padding . В браузере эти свойства преобразуются в отдельные свойства для каждой стороны блока. padding преобразуется в padding-top , padding-right , padding-bottom и padding-left . Выведем свойство padding-left у первого блока:

console.log(block.style.paddingLeft); //выведет: 10px

Хотя мы не устанавливали именно это свойство, но оно есть, потому что в таком виде содержится стиль элементов в браузере.

Устанавливать стиль можно с помощью любых CSS-свойств. А вот получать нужно отдельные свойства для каждой стороны блока. Если получить свойство, устранавливающее стиль со всех сторон блока, то результат может в разных браузерах быть разный.

Объект style содержит не все CSS-свойства элемента, а только те, которые установлены через этот объект, а также те, которые заданы в атрибуте тэга style . Стиль, полученный элементом через селекторы, нельзя узнать с помощью объекта style . Для этого используется метод getComputedStyle() . Он возвращает объект, содержащий все CSS-свойства элемента, которые есть на данный момент.

getComputedStyle (элемент, псевдоэлемент);

псевдоэлемент — используется для получения свойств псевдоэлемента. Необязательный параметр.

Определим свойства блока:

let blockStyle = getComputedStyle(block); console.log(blockSyle.borderLeftWidth);

Цвет элемента можно указывать в разных системах. Но свойства объектов содержат цвет в системе RGB. Это не зависит от того, как указан цвет, через объект style или с помощью селектора. Результат будет один и тот же. Это несколько усложняет работу с цветом. Если Вам нужно получить цвет элемента и как-то использовать его, то придётся работать со строкой, содержащей ненужные символы.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2024 © basecourse.ru Все права защищены

Как поменять свойство css через js

Для работы со стилями применяется метод css() . Чтобы получить значение нужного свойства, мы передаем в этот метод в качестве параметра название свойства:

console.log($('body').css('font-size'));

Изменение стиля

Чтобы изменить стиль, во-первых, мы можем передать в метод css в качестве второго параметра новое значение свойства:

$('a').css('font-weight', 'bold');

Во-вторых, мы можем изменить стиль с помощью функции, которая также передается в качестве второго параметра метода css. Например, изменим цвет шрифта ссылок:

$('a').css('color', function(index, oldValue) < if(oldValue=='rgb(0, 0, 238)') else >);

В зависимости от того, какое было старое значение oldValue элемента для данного свойства, функция возвращает новое значение для каждого элемента выборки.

В-третьих, мы можем передать массив свойств для установки:

$('a').css();

Здесь в качестве параметра мы передаем объект javascript, в котором устанавливаем для нужных свойств новые значения.

Иногда необходимо увеличить или уменьшать свойства относительно текущего значения на определенное количество. В этом случае мы можем написать так:

$('a').css();

Установка ширины и высоты

Несмотря на то, что мы можем манипулировать свойствами width и height через метод css, мы можем также использовать одноименные методы width() и height() :

var div = $('div').first(); var newWidth=div.width()+150; div.width(newWidth); var newHeight = div.height()+50; div.height(newHeight);

Работа с CSS псевдоэлементами через JavaScript и jQuery

Часто разработчики сталкиваются с необходимостью манипулировать CSS псевдоэлементами, такими как ::before или ::after , через JavaScript или jQuery. Например, в стилевом файле CSS может быть правило, которое добавляет псевдоэлемент ::after с определенным содержимым к элементам с классом example :

.example::after

Возникает задача изменить это содержимое с ‘original content’ на ‘new content’ с использованием JavaScript или jQuery. К сожалению, прямое взаимодействие с псевдоэлементами ::before и ::after через JavaScript или jQuery невозможно, так как они не являются частью DOM.

Однако есть обходные способы решения этой задачи.

Использование JavaScript

Один из подходов — изменить CSS-правила для псевдоэлемента ::after через JavaScript. Можно добавить новое правило в стилевой элемент на странице:

let style = document.createElement('style'); style.innerHTML = ` .example::after < content: 'new content'; >`; document.head.appendChild(style);

В этом случае, когда браузер перерисовывает страницу, он найдет новое CSS-правило и применит его, заменяя содержимое псевдоэлемента ::after на ‘new content’.

Использование jQuery

С помощью jQuery можно воспользоваться методом .css() , чтобы изменить CSS-свойства элемента. Однако, как уже отмечалось, псевдоэлементы не являются частью DOM, и изменение их свойств напрямую не будет работать.

Вместо этого можно изменить CSS-класс самого элемента, а затем в CSS-файле определить новый класс с нужным свойством content для псевдоэлемента ::after :

$('.example').addClass('new-class');

.new-class::after

Это решение требует некоторой предварительной подготовки и хорошо подходит для ситуаций, когда возможные значения content известны заранее.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *