Как с помощью js менять css свойства. Взаимодействие JavaScript и CSS. Управление встроенными стилями

Модифицируем CSS свойства через JavaScript

Как с помощью js менять css свойства. Взаимодействие JavaScript и CSS. Управление встроенными стилями

Представляю Вашему вниманию универсальный метод для манипулирования CSS свойствами в Javascript сценариях. Протестировано во всех современных браузерах (включая IE6).

Вы можете спросить меня: а зачем это нужно, если есть CSS? Ну например, для создания анимации какого-либо элемента при определенном событии или вам нужно узнать значение свойства элемента.

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

Просчет высоты осуществлял PHP и подставлял ее значение в простой JS сценарий.

Таблица соответствия CSS свойств Javascript аналогам:

CSS свойствоJavaScript аналог
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

Пример использования:

function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements;} //После загрузки страницыwindow.onload = function() { //установим блоку с id=mydiv высоту 95px //ВНИМАНИЕ! не забывайте указывать px или pt $('mydiv').style.height='95px'; //выведем значение ширины блока mydiv alert($('mydiv').style.width);}

Вы наверняка обратили внимание на функцию $() я ее взял из библиотеки Prototype, чтобы не использовать каждый раз getElementById.

Источник: http://WebDev.ru/articles/css_properties_to_javascript_conversion.html

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

Как с помощью js менять css свойства. Взаимодействие JavaScript и CSS. Управление встроенными стилями

От автора: за последние несколько итераций CSS границы между CSS и JavaScript начали стираться. CSS был статическим языком, предназначенным для определения цветов, внешнего вида, но не интерактивности. Вы можете использовать проценты в измерениях как своего рода интерактивность для окружающей среды, но реакция на изменения была прерогативой JavaScript.

В прежние времена HTML создавал структуру, CSS-стиль, а JavaScript — интерактивность. Или, как я сказал в своей книге в 2006 году, если бы ваш сайт был фильмом, HTML был бы сценарием, CSS — режиссурой, а JavaScript — спецэффектами.

В настоящее время CSS гораздо более мощный. У нас есть анимация, переходы, calc() и гораздо более гибкие значения, такие как em, rem, vw, vh и другие. У нас также есть интерактивность с помощью псевдо-селекторов, таких как hover, focus, и состояния интерактивных элементов, таких как кнопки. Мы можем даже хакнуть чек-боксы, чтобы писать полноценные игры на чистом CSS.

Это замечательно! У поклонников CSS гораздо больше шансов проявить терпение и знания, чтобы анимация или взаимодействие выглядели и вели себя правильно.

А движки CSS отвечают за хорошую производительность не в ущерб интерактивности или расходованию заряда батареи устройства конечного пользователя.

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

Тем не менее, все еще существуют границы и случаи использования, когда CSS недостаточно, и вам нужен JavaScript. Часто речь идет о чтении текущего состояния чего-либо, происходящего с окном браузера, или о взаимодействии, не учитываемом в спецификации CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В этом случае полное переключение на JavaScript выглядит как естественная реакция, и для меня имеет больше смысла находить способ взаимодействия JavaScript и CSS. JavaScript в некотором роде предназначен для того, чтобы считать значение и сделать его доступным для CSS.

Раньше единственным способом сделать это было хранить классы в родительских элементах или удалять классы при выполнении определенных условий. Но с пользовательскими свойствами («переменные CSS») стало намного проще взаимодействовать между JavaScript и CSS.

Пользовательские свойства позволяют устанавливать «переменные» в CSS и использовать их позже. Например:

::root { — company-blue: #369; }h1 { color: var( — company-blue); }

color: var( — company-blue);

Пользовательские свойства работают иначе, чем переменные CSS в препроцессорах. Вы можете объединить их, но есть ограничения.

Как объясняет мой коллега Грег Витворт: «Это не совсем верно в отношении пользовательских реквизитов.

Проблема, на которую, я думаю, вы в первую очередь ссылаетесь, — это потенциальные ограничения в CSS в целом, хотя я заметил, что Шиме уже показал вам, что конкатенация может быть выполнена, но, вероятно, не во всех сценариях, где единственное желание состоит в том, чтобы объединить реальные строки (например: “bar” calc(5 + 8) будет преобразовано \”foo\” calc(58), так как оно не является допустимым calc и, следовательно, они также преобразуются в строку, но с экранированными кавычками. Все в переменной разбивается на токены Таким образом, это может быть строка или нет, в зависимости от того, какое значение определено токенизатором. Если это не недопустимый идентификатор, но не тот, который может быть сопоставлен, то он преобразуется в строку для использования в CSS. Все, что передано в JS, преобразуется в строку. Вы можете увидеть это в этом JSBin«.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Самый простой способ изменить пользовательские свойства CSS — это использовать calc(), чтобы умножить их на значение:

::root { –startwidth: 200; }h1 { width: (var( –startwidth) * 1px); } h2 { width: (var( –startwidth) * 0.5px); }

width: (var( –startwidth) * 1px); width: (var( –startwidth) * 0.5px);

Теперь, когда вы также можете определить пользовательские свойства в JavaScript и добавить их в набор стилей любого элемента, это отличный способ использовать JavaScript только для чтения значения и оставить остальное для CSS. Например, если вы хотите знать, насколько далеко прокрутился документ, вы можете прочитать это в JavaScript с помощью обработчика событий и изменить пользовательский атрибут CSS:

window.addEventListener('scroll', (e) => { document.body.style.setProperty(' –scrolly', window.scrollY); });

window.addEventListener('scroll', (e) => { document.body.style.setProperty(' –scrolly', window.scrollY);

h1 { position: fixed; width: calc(var( — scrolly)*1px); background: #339; }

width: calc(var( — scrolly)*1px);

Вы можете посмотреть этот JSBin. Это ни в коем случае не разумная демонстрация, но мне действительно нравится тот факт, что вы можете использовать JavaScript, чтобы достичь того, чего не может в CSS, и все же позволить CSS быть основным драйвером и определителем интерактивности.

Christian Heilmann

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/ispolzovanie-polzovatelskix-atributov-css/

Операции над классами и стилями элементов в JavaScript

Как с помощью js менять css свойства. Взаимодействие JavaScript и CSS. Управление встроенными стилями

В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.

Управление классом (классами) элемента

Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className. Данное свойство является отражением атрибута class в DOM.

DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов.

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

Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className:

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

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

DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.

Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.

Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.

Пример, в котором проверим наличие у элемента класса content__show:

Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList.

Свойство classList

Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.

Методы classList:

  • .add( className1[,className2,…] ) – добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
  • .remove( className1[,className2,… ] ) – удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
  • .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false.
  • .toggle( className [,flag] ) – переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр (flag) необязательный. По умолчанию он имеет значение undefined. Если ему установить значение true или false, то он будет работать как метод add или remove, т.е. либо добавлять класс к элементу, либо удалять его у него.

Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList:

// получим элемент c id = “sidebar” var sideBar = document.querySelector('#sidebar'); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle(“hidden-xs”); // добавим три дополнительных класса к элементу sideBar.classList.add('col-xs-6','col-sm-4','col-md-3'); // удалим класс hidden-xs у элемента sideBar.classList.remove('hidden-xs'); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains('hidden-lg') { myID.classList.add('hidden-md'); }

Объект classList является псевдомассивом, т.е. его можно перебрать как массив.

Пример, в котором переберём все классы classList:

Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.

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

В DOM у каждого элемента есть свойство style, с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство style:

Квадрат

Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color.

В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor.

А, например, CSS-свойство с браузерным префиксом -webkit-border-radius – как WebkitBorderRadius.

Удаление стилей

Например, установим body некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

document.body.style.backgroundColor = '';

Примеры использования DOM-свойства style для установки стилей элементам.

Свойство cssText

Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText. Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style.

Пример, в котором установим стили “font-size:40px; color:blue;” элементам с классом intro:

При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.

Выполнить операцию, аналогичную той которую выполняет свойство style.cssText, можно ещё через метод setAttribute.

Например:

Задания

1. Написать скрипт, используя classList, для установления элементу с классом text трех классов: size-40, color-red и bg-yellow:

Некоторый текст…

2. Написать код для установления стиля “width: 180px; height: 180px;” всем элементам на странице с классом, начинающимся со слов block-.

Источник: https://itchief.ru/javascript/classes-and-styles

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