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

Как менять css через js

  • автор:

Заменить текст с помощью JS

Старался следовать условиям вопроса буквально. Так-то конечно незачем, потому что все пробельные символы будут нормализованы.

12 июл 2020 в 18:59

@vsemozhetbyt спасибо, но не совсем то. Наверное моя вина, что не конкретизировал. Нужно заменить конкретно «Первое слово» на «Второе слово». В этом блоке может быть и «Третье слово», но его трогать не нужно) Как быть?

12 июл 2020 в 19:04
Тогда можно, как в последней редакции ответа.
12 июл 2020 в 19:57

К сожалению, я не знаю PHP и как его код взаимодействует с JS, так что, наверное, вам лучше задать новый вопрос с соответствующими тегами и подробным описанием)

12 июл 2020 в 20:58

document.querySelector('.block').onmousemove = function() < setTimeout( () =>< document.querySelector('.block').innerHTML = 'Второе слово'; >, 300) >
Первое слово

Отслеживать
ответ дан 12 июл 2020 в 20:36
2,358 1 1 золотой знак 12 12 серебряных знаков 33 33 бронзовых знака

  • javascript
  • html
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Позиционирование элементов с помощью JS

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

Время чтения: 11 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Когда использовать стили
  3. Когда использовать скрипты
  4. Как менять позиционирование на скриптах
    1. Изменять классы
    2. Изменять style
      1. Изменение margin или top / left / right / bottom
      2. Изменение transform
      3. Изменение кастомных свойств CSS
      1. Саша Беспоясов советует

      Контрибьюторы:

      Обновлено 16 ноября 2022

      Кратко

      Скопировать ссылку «Кратко» Скопировано

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

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

      Когда использовать стили

      Скопировать ссылку «Когда использовать стили» Скопировано

      Используйте стили для позиционирования всегда, когда это возможно.

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

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

      Когда использовать скрипты

      Скопировать ссылку «Когда использовать скрипты» Скопировано

      Используйте скрипты для позиционирования тогда, когда стилей не хватает.

      CSS ограничен в обратной связи на действия пользователей на экране. В нём есть такие штуки как @keyframes , transition , :hover , :active , :focus и т. д., но этого не всегда достаточно.

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

      Такие случаи — это не просто стилизация документа, а скорее смесь из стилизации и программной логики. Чтобы решить такую задачу, нам нужны как инструменты стилизации (CSS), так и инструменты для программирования логики (JS).

      Как менять позиционирование на скриптах

      Скопировать ссылку «Как менять позиционирование на скриптах» Скопировано

      Изменять положение элементов (как и любые стили элементов) на странице можно несколькими способами.

      Изменять классы

      Скопировать ссылку «Изменять классы» Скопировано

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

       .element  /* Стили самого элемента. */> .element-initial  /* Стили, определяющие начальное положение элемента на странице, например: */ transform: translateX(0px);> .element-final  /* Стили, определяющие конечное положение, например: */ transform: translateX(50px);> .element  /* Стили самого элемента. */ > .element-initial  /* Стили, определяющие начальное положение элемента на странице, например: */ transform: translateX(0px); > .element-final  /* Стили, определяющие конечное положение, например: */ transform: translateX(50px); >

      Элементу изначально заданы классы element element — initial , которые задают его стили, а также его начальное положение.

      Теперь в ответ на действие пользователя (например, в ответ на клик), поменяем класс элемента, отвечающий за положение. Воспользуемся методом class List . toggle ( ) у элемента, чтобы добавить класс, если его нет на элементе, и убрать, если класс есть:

       // Обрабатываем событие клика на элементе:element.addEventListener('click', () =>  element.classList.toggle('element-final') element.classList.toggle('element-initial')>) // Обрабатываем событие клика на элементе: element.addEventListener('click', () =>  element.classList.toggle('element-final') element.classList.toggle('element-initial') >)

      Тогда получим элемент, который меняет своё положение при клике на него:

      Этот способ изменять стили элемента с помощью скриптов самый простой и чистый — все стили остаются описанными внутри CSS. Однако он не всегда подходит.

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

      Изменять style

      Скопировать ссылку «Изменять style» Скопировано

      Второй способ изменять положение элемента — менять атрибут style с помощью JS.

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

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

      Для изменения положения через style можно использовать разные свойства.

      Изменение margin или top / left / right / bottom

      Скопировать ссылку «Изменение margin или top / left / right / bottom» Скопировано

      Первое, что приходит на ум — изменение соответствующих CSS-свойств типа margin или left / top / right / bottom .

      Создадим элемент с классом element :

       .element  width: 50px; height: 50px; background: black; position: absolute;> .element  width: 50px; height: 50px; background: black; position: absolute; >

      Теперь попробуем написать драг-н-дроп для мыши.

       // Сперва создадим ссылку на этот элемент,// чтобы обрабатывать события на нём:const element = document.querySelector('.element') // Переменная dragging будет отвечать за состояние элемента.// Если его тащат, то переменная будет со значением true.// По умолчанию она false.let dragging = false // В переменных startX и startY мы будем держать координаты точки,// в которой находился элемент, когда мы начали его тащить мышью.let startX = 0let startY = 0 // При событии mousedown (когда на элемент нажимают мышью)// мы отмечаем dragging как true — значит, элемент начали тащить.element.addEventListener('mousedown', (e) =>  dragging = true // В значения для startX и startY мы помещаем положение курсора // через свойства события e.pageX и e.pageY. startX = e.pageX - Number.parseInt(element.style.left || 0) startY = e.pageY - Number.parseInt(element.style.top || 0) // Из положения курсора мы вычитаем отступы элемента, если они есть. // Вычитание отступов нам нужно, чтобы элемент «запоминал» // своё последнее положение, иначе мы всегда будем начинать тащить его // от начала экрана.>) // Далее мы обрабатываем событие перемещения мыши по body.// Мы наблюдаем именно за body, потому что хотим,// чтобы изменения работали на всей странице,// а не только внутри элемента element.document.body.addEventListener('mousemove', (e) =>  // Если элемент не тащат, то ничего не делаем. if (!dragging) return // Если тащат, то высчитываем новое положение, // вычитая начальное положение элемента из положения курсора. element.style.top = `$px` element.style.left = `$px`>) // Когда мы отпускаем мышь, мы отмечаем dragging как false.document.body.addEventListener('mouseup', () =>  dragging = false>) // Сперва создадим ссылку на этот элемент, // чтобы обрабатывать события на нём: const element = document.querySelector('.element') // Переменная dragging будет отвечать за состояние элемента. // Если его тащат, то переменная будет со значением true. // По умолчанию она false. let dragging = false // В переменных startX и startY мы будем держать координаты точки, // в которой находился элемент, когда мы начали его тащить мышью. let startX = 0 let startY = 0 // При событии mousedown (когда на элемент нажимают мышью) // мы отмечаем dragging как true — значит, элемент начали тащить. element.addEventListener('mousedown', (e) =>  dragging = true // В значения для startX и startY мы помещаем положение курсора // через свойства события e.pageX и e.pageY. startX = e.pageX - Number.parseInt(element.style.left || 0) startY = e.pageY - Number.parseInt(element.style.top || 0) // Из положения курсора мы вычитаем отступы элемента, если они есть. // Вычитание отступов нам нужно, чтобы элемент «запоминал» // своё последнее положение, иначе мы всегда будем начинать тащить его // от начала экрана. >) // Далее мы обрабатываем событие перемещения мыши по body. // Мы наблюдаем именно за body, потому что хотим, // чтобы изменения работали на всей странице, // а не только внутри элемента element. document.body.addEventListener('mousemove', (e) =>  // Если элемент не тащат, то ничего не делаем. if (!dragging) return // Если тащат, то высчитываем новое положение, // вычитая начальное положение элемента из положения курсора. element.style.top = `$e.pageY - startY>px` element.style.left = `$e.pageX - startX>px` >) // Когда мы отпускаем мышь, мы отмечаем dragging как false. document.body.addEventListener('mouseup', () =>  dragging = false >)

      Тогда получится вот такой драг-н-дроп:

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

      Мы можем сделать лучше.

      Изменение transform

      Скопировать ссылку «Изменение transform» Скопировано

      Перепишем наш драг-н-дроп, меняя теперь значение свойства transform .

      Основа кода останется той же, стили и разметка не поменяются вовсе. В скриптах мы слегка изменим определение положения элемента.

       // . element.addEventListener('mousedown', (e) =>  dragging = true // В этот раз мы не сможем считать нужные нам значения напрямую. // Вместо этого нам потребуется вначале вычислить стиль элемента // через window.getComputedStyle(), а затем узнать значение // свойства transform. const style = window.getComputedStyle(element) // Мы могли бы просто считать значение style.transform, // но это бы нам не сильно помогло. // При обычном считывании мы бы получили нечто вроде: // matrix(1, 0, 0, 1, 27, 15); // // Это матрица афинных преобразований. // Её можно представить в виде: // matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); // где: // - scaleX — масштабирование по горизонтали, // - scaleY — масштабирование по вертикали, // - skewX — перекос по горизонтали, // - skewY — перекос по вертикали, // - translateX — смещение по горизонтали, // - translateY — смещение по вертикали. // // Но даже учитывая, что у нас есть все необходимые числа, // работать с этим неудобно — это же просто строка. // // К счастью мы можем воспользоваться DOMMatrixReadOnly, // который преобразует эту матрицу в удобную для использования: const transform = new DOMMatrixReadOnly(style.transform) // Теперь мы можем воспользоваться свойствами, // которые содержат в себе значения translateX и translateY. const translateX = transform.m41 const translateY = transform.m42 // Дальше — как раньше, только вычитаем не top и left, // а translateX и translateY. startX = e.pageX - translateX startY = e.pageY - translateY>)// добавляем возможность отпустить элемент при отжатии клавишиdocument.body.addEventListener("mouseup", () =>  dragging = false;>); // . element.addEventListener('mousedown', (e) =>  dragging = true // В этот раз мы не сможем считать нужные нам значения напрямую. // Вместо этого нам потребуется вначале вычислить стиль элемента // через window.getComputedStyle(), а затем узнать значение // свойства transform. const style = window.getComputedStyle(element) // Мы могли бы просто считать значение style.transform, // но это бы нам не сильно помогло. // При обычном считывании мы бы получили нечто вроде: // matrix(1, 0, 0, 1, 27, 15); // // Это матрица афинных преобразований. // Её можно представить в виде: // matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); // где: // - scaleX — масштабирование по горизонтали, // - scaleY — масштабирование по вертикали, // - skewX — перекос по горизонтали, // - skewY — перекос по вертикали, // - translateX — смещение по горизонтали, // - translateY — смещение по вертикали. // // Но даже учитывая, что у нас есть все необходимые числа, // работать с этим неудобно — это же просто строка. // // К счастью мы можем воспользоваться DOMMatrixReadOnly, // который преобразует эту матрицу в удобную для использования: const transform = new DOMMatrixReadOnly(style.transform) // Теперь мы можем воспользоваться свойствами, // которые содержат в себе значения translateX и translateY. const translateX = transform.m41 const translateY = transform.m42 // Дальше — как раньше, только вычитаем не top и left, // а translateX и translateY. startX = e.pageX - translateX startY = e.pageY - translateY >) // добавляем возможность отпустить элемент при отжатии клавиши document.body.addEventListener("mouseup", () =>  dragging = false; >);

      А также немного обновим изменение положения:

       // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return const x = e.pageX - startX const y = e.pageY - startY // В этот раз мы можем объединить обновлённые координаты // в одну запись translate, которую потом // присвоим в качестве значения свойству transform. element.style.transform = `translate($px, $px)`>) // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return const x = e.pageX - startX const y = e.pageY - startY // В этот раз мы можем объединить обновлённые координаты // в одну запись translate, которую потом // присвоим в качестве значения свойству transform. element.style.transform = `translate($x>px, $y>px)` >)

      В итоге получим такой же драг-н-дроп, но работающий на transform .

      Но мы можем ещё лучше ��

      Изменение кастомных свойств CSS

      Скопировать ссылку «Изменение кастомных свойств CSS» Скопировано

      Сейчас код рабочий, но его трудно читать. Как минимум потому, что надо знать, как работает матрица преобразований и DOM Matrix Read Only .

      Мы же можем не менять значение transform вовсе, а вместо этого менять значение CSS-переменных, чтобы обновлять положение элемента!

      Первым делом определяем кастомные свойства CSS в стилях элемента:

       .element  width: 50px; height: 50px; background: black; position: absolute; /* В переменной --x мы будем держать значение координаты по горизонтали; в переменной --y — по вертикали. */ --x: 0px; --y: 0px; /* Укажем transform, значением которого передадим translate с указанными переменными. В итоге нам не придётся менять сам transform, мы сможем ограничиться лишь изменением значений переменных --x и --y. */ transform: translate(var(--x), var(--y));> .element  width: 50px; height: 50px; background: black; position: absolute; /* В переменной --x мы будем держать значение координаты по горизонтали; в переменной --y — по вертикали. */ --x: 0px; --y: 0px; /* Укажем transform, значением которого передадим translate с указанными переменными. В итоге нам не придётся менять сам transform, мы сможем ограничиться лишь изменением значений переменных --x и --y. */ transform: translate(var(--x), var(--y)); >

      Теперь подправим скрипт, чтобы сперва считать значение этих переменных:

       // . element.addEventListener('mousedown', (e) =>  dragging = true // Получаем стиль элемента: const style = window.getComputedStyle(element) // Считываем значение каждой переменной через getPropertyValue: const translateX = parseInt(style.getPropertyValue('--x')) const translateY = parseInt(style.getPropertyValue('--y')) // Дальше всё остаётся по-старому :–) startX = e.pageX - translateX startY = e.pageY - translateY>) // . element.addEventListener('mousedown', (e) =>  dragging = true // Получаем стиль элемента: const style = window.getComputedStyle(element) // Считываем значение каждой переменной через getPropertyValue: const translateX = parseInt(style.getPropertyValue('--x')) const translateY = parseInt(style.getPropertyValue('--y')) // Дальше всё остаётся по-старому :–) startX = e.pageX - translateX startY = e.pageY - translateY >)

      А теперь изменим обновление стилей:

       // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return // Обратите внимание, насколько лаконичной стала запись. // Мы всего лишь указываем, какое значение должна // принять каждая из переменных: element.style.setProperty("--x", `$px`) element.style.setProperty("--y", `$px`)>) // . document.body.addEventListener('mousemove', (e) =>  if (!dragging) return // Обратите внимание, насколько лаконичной стала запись. // Мы всего лишь указываем, какое значение должна // принять каждая из переменных: element.style.setProperty("--x", `$e.pageX - startX>px`) element.style.setProperty("--y", `$e.pageY - startY>px`) >)

      В результате получаем такой же драг-н-дроп!

      На практике

      Скопировать ссылку «На практике» Скопировано

      Как изменить стили элемента с помощью свойства Element.style в JavaScript

      Как изменить стили элемента с помощью свойства Element.style в JavaScript

      Свойство Element.style в JavaScript , как правило, используется только для чтения. Оно возвращает объект CSSStyleDeclaration — массив CSS -стилей элемента, а также пары ( key: value ) всех его стилей. Все они доступны для чтения и изменения.

       
      Hello, world!
      




      
 
      // Получаем объект CSSStyleDeclaration let el = document.querySelector('.element'); // Выводим в консоль объект CSSStyleDeclaration let elStyles = el.style; console.log(elStyles);

      Но задавать стили напрямую с помощью этого свойства — плохая практика.

      elStyles.style = 'color: red; font-size: 3rem;';

      Установить напрямую отдельные стили с помощью свойства Element.style и JavaScript можно, используя CamelCase .

      elStyles.fontSize = '3rem'; elStyles.color = 'red';

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

      Как правильно использовать Element.style в JavaScript

      В таком случае как изменить Element.style ? Лучшим вариантом является использование свойства Element.style.cssText , которое работает как Element.className , но для инлайновых стилей. Его можно применять в качестве геттера или сеттера.

      В первом случае он позволяет получить все инлайновые стили элемента в формате строки. Во втором — заменит все текущие стили элемента на указанные в Element.style.cssText . Они также задаются в строковом формате.

      // Получаем инлайновые стили элемента (если таковые имеются) let elStyles = el.style.cssText; // Удаляем существующие стили и заменяем их на новые elStyles.cssText = 'color: red; font-size: 3rem;';

      Если задача состоит не в полной замене стилей, а добавлении дополнительных или замене одного конкретного стиля, то и это cssText позволяет легко реализовать через свойство Element.style и JavaScript .

      // Добавляем новый инлайновый стиль к существующим elStyles.cssText += 'color: green;';

      При наличии у элемента стилей, прописанных в CSS обычным способом, инлайновые, конечно, их «затрут».

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

      Element.innerHTML

      Свойство интерфейса Element innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

      Примечание: Если узлы , , или (en-US) имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>) , innerHTML вернёт эти символы как &amp, &lt и &gt соответственно. Используйте Node.textContent для получения правильной копии содержимого этих текстовых узлов.

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

      Синтаксис

      const content = element.innerHTML; element.innerHTML = htmlString;

      Значение

      Строка DOMString , которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

      Исключения

      Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.

      Возникает при попытке вставить HTML в узел, у которого родителем является Document .

      Примечания

      Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

      .body.innerHTML = ""; // Заменяет содержимое тела пустой строкой. 
      // Скопируйте и вставьте в адресную строку в виде одной строки. javascript: "
      " + document.documentElement.innerHTML.replace(//g, "<") + "
      

      "; 
      

      Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введён текст в поле ввода , IE меняет значение атрибута свойства innerHTML, но браузеры Gecko не делают этого.
      

      Соображения безопасности
      

      Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.
      

      const name = "John"; // предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае // . name = ""; el.innerHTML = name; // безвредный в этом случае 
      

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

      const name = ""; el.innerHTML = name; // показывает alert 
      

      По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent . Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст.
      

      Пример
      

      Этот пример использует innerHTML для создания механизма логирования сообщений внутри элемента на странице.
      

      JavaScript
      

      function log(msg)  var logElem = document.querySelector(".log"); var time = new Date(); var timeStr = time.toLocaleTimeString(); logElem.innerHTML += timeStr + ": " + msg + "
      "      ; > log("Регистрация событий мыши внутри этого контейнера. "); 
      

      Функция log() создаёт сообщение получая текущее время из объекта Date , используя toLocaleTimeString() , и соединяя строку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом «log» .
      

      function logEvent(event)  var msg = "Event " + event.type + " at " + event.clientX + ", " + event.clientY + ""; log(msg); > 
      

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

      var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); boxElem.addEventListener("click", logEvent); boxElem.addEventListener("mouseenter", logEvent); boxElem.addEventListener("mouseleave", logEvent); 
      

      HTML
      

      HTML довольно простой для нашего примера.
      

      div class="box"> div>strong>Log:strong>div> div class="log">div> div> 
      

      CSS
      

      Для нашего примера используем следующие CSS стили.
      

      .box  width: 600px; height: 300px; border: 1px solid black; padding: 2px 4px; overflow-y: scroll; overflow-x: auto; > .log  margin-top: 8px; font-family: monospace; > 
      

      Результат
      

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

      Спецификации
      

      

      
Specification

      

      

      
DOM Parsing and Serialization 
      # dom-innerhtml-innerhtml      		

      
      

      

      Смотрите также
      

        

      • innerDOM — Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.
        • 

      • Element.insertAdjacentHTML — Альтернатива для innerHTML, позволяющая добавлять новый HTML.
        • 

      • jssaxparser — Более надёжным (хотя и более тяжёлым) решением, чем innerDOM (поддерживает парсинг с пространствами имён, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку значительно проще).
        • 

      • Эффективность соображений: quirksmode.
        • 

      

      Found a content problem with this page?
      

        

      • Edit the page on GitHub.
        • 

      • Report the content issue.
        • 

      • View the source on GitHub.
        • 

      

      This page was last modified on 3 авг. 2023 г. by MDN contributors.
      

      Your blueprint for a better internet.
      

      


      Похожие публикации:
        

      1. Где купить камаз в етс 2
        2. 

      2. Как убрать ночной режим на компьютере windows 10
        3. 

      3. Как уволить сотрудника в битрикс 24
        4. 

      4. Почему фонит aux на ford focus 2
        5.

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

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