window.addEventListener('load', () => {
const multiplyInput = document.querySelector('#multiply');
const resultElements = document.querySelectorAll('.result');
// Записать дефолтные значения в атрибут data-default-count (ну или массив там и т.п.)
resultElements.forEach(item => {
item.setAttribute('data-default-count', item.innerText);
});
// после каждого изменения инпута
multiplyInput.addEventListener('input', e => {
// перебрать все дивы
resultElements.forEach(item => {
// значения data-default-count умножить на то, что введено в инпут(без проверок каких-то там)
item.innerText = item.getAttribute('data-default-count') * e.target.value;
});
})
})window.addEventListener('load', () => {
const multiplyInput = document.querySelector('#multiply');
const resultElements = document.querySelectorAll('.result');
resultElements.forEach(item => {
item.setAttribute('data-default-count', item.innerText);
});
const calcData = () => {
resultElements.forEach(item => {
item.innerText = item.getAttribute('data-default-count') * multiplyInput.value;
});
}
calcData();
multiplyInput.addEventListener('input', calcData)
})font-family: 'FontAwesome';
/* Все дочерние элементы этого flex-блока, которые находятся на одной горизонтали, становятся одной высоты */
.single-post__prod{ align-items: stretch; }
/* Карточка товара становится Флексом, в колонку. Чтобы можно было позиционировать её дочерние элементы */
.single-post__prod-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.single-post__prod-item > * { width: 100% } /* все дочерние элементы чтобы были во всю ширину */
.single-post__prod-item img {
margin: 0 auto; /* заменил margin: auto */
}
.single-post__prod-weight,
.single-post__pricing{
margin-top: auto; /* Делаем так, чтобы этот блок и все блоки, которые ниже него, были прилеплены книзу */
}
.single-post__prod-weight + .single-post__pricing{
margin-top: 0; /* Если существует single-post__prod-weight, то у single-post__pricing margin-top убираем */
}.top__slider.top__slider.<div class="top__slider">
<div class="top__slider-item">
<img class="top__slider-images" src="images/slider-img.png" alt="">
<p class="top__slider-text">
4 грн/мин 5 мест 50 тыс. км пробег
</p>
</div>
<div class="top__slider">.gallery__item{ flex-shrink: 0; }
svg > use{ fill: red }<img src="mysvg.svg" />) значения атрибутов fill и stroke заменить на css-переменные.fill="var(--myColor1)" stroke="var(--myColor2)".myBlock{
--myColor1: red;
--myColor2: green
}
.myBlock:hover{
--myColor1: blue;
--myColor2: aqua
}<highcharts v-if="DATA.length" :key="DATA.length" :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts>$this.toggleClass("active");$this.find('.accordion__content').slideToggle(500); // 500 — скорость появления\исчезновенияhtml::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; }
html, body { -ms-overflow-style: none; overflow: -moz-scrollbars-none; }<img />применил css-свойство image-rendering, подбирая для каждого браузера своё значение префиксами..slider__ я бы / поместил в отдельный <span />.slider__current и .slider__max задал бы минимальную ширину (дав им inline-block, а лучше их контейнеру flex)..header position: fixed, я бы изначально дал position: sticky. А уже классом .header_fixed просто давал бы background и box-shadow.
#MY_ELEMENT, #MY_ELEMENT *, #MY_ELEMENT *::before, #MY_ELEMENT *::after{
all: unset
}<input id="myInput" type="text">
<div id="myResult">Вы выбрали: <span></span></div>// Исходный массив
const string = ["ТЕСТ","Строка", "String"]
// Инпут
const myInput = document.querySelector('#myInput')
// Куда выводить результат
const myResult = document.querySelector('#myResult')
// При вводе в инпут
myInput.addEventListener('input', e => {
// Фильтруем исходный массив
// Если эелемент массива (например "ТЕСТ") содержит введённую в инпут букву\строку
// То НЕ фильтруем этот элемент массива
// Остальные элементы фильруем
const filteredString = string.filter(item => item.toLowerCase().indexOf(e.target.value.toLowerCase()) != -1)
// Выводим в myResult результат
// Отфильтрованный массив filteredString преобразуем в строку, разделённую ', '
// Если массив пуст, то выводим 'ничего...'
myResult.innerHTML = filteredString.join(', ') || 'ничего...'
})display: blockfont-size: 0;
line-height: 0;<img /> изначально - display :inline-block