window.addEventListener("scroll", (function(t) {
var e = document.documentElement.scrollTop
, r = (e / 3).toFixed(2)
, a = document.querySelector(".splash");
null !== a && (a.style.backgroundPosition = "0px -" + r + "px");
var n = document.querySelector("#home > .navbar");
e > 50 ? n.classList.remove("is-transparent") : n.classList.add("is-transparent")
}
));
app.ifScroll =
ifScroll.value =
. <router-link :to="`/Product/${item}`">{{ item }}</router-link>
<script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>
<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>
<script setup>
import { directive as vClickAway } from "vue3-click-away";
const onClickInside = (event) => {
console.log('onClickInside: ', event);
};
</script>
script setup
image.naturalHeight
. Плюс ко всему document.querySelector
выбирает первый попавшийся элемент, а не тот который бы создан последним<section class="flex-sec">
<button>BTN</button>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
section {
display: flex;
button {
width: 50px;
height: 50px;
border: solid 4px black;
background: yellow;
}
}
div {
width: 200px;
height: 200px;
background: #00ff0b;
margin: 10px;
}
.b1 {
background: #fc0;
}
let cards = document.querySelectorAll(".flex-sec > div");
let button = document.querySelector(".flex-sec>button");
let firstClick = true;
button.addEventListener("click", switchColor);
function switchColor() {
for (let i = 0; i < cards.length; i++) {
if (firstClick) {
if (i % 2 == 0) {
cards[i].classList.add("b1");
}
} else {
cards[i].classList.toggle("b1");
}
}
firstClick = false;
}
function fb3cont() { b3Cont.classList.remove("__active"); } document.onclick = function() { if (b3Cont.classList.contains("__active")) { fb3cont()}; }
чтобы в моем примере при наведении вокруг буквы S фон был не белый, а прозрачный, и бордер с градиентом
(ну и если будет решение плюс к этому чтобы бордер вращался / ps. необязательно )
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);
// Выберем все инпуты и превратим NodeList в обычный массив,
// чтобы можно было применять методы массива
// [...] - деструктуризация
const inputs = [...document.querySelectorAll("input")]
// Определим объект с цветами "0" - если ничего не выбрано
// Остальные совпадают с value
const colors = {
"0": "#03f3f3",
"1": "#00ff00",
"2": "#ccff00"
}
inputs.forEach(input => {
// пройдемся циклом по всем инпутам
input.addEventListener('click', () => {
// Добавим обработчик на каждый инпут
// inputs.some(i => i.checked) - проверка есть ли хоть один инпут cheсked
// если нет цвет для body по ключу "0"
// если есть по ключу input.value ("1"|"2")
document.body.style.backgroundColor = inputs.some(i => i.checked)
? colors[input.value]
: colors["0"]
})
})
querySelectorAll
возвращает NodeList всеx найденный нод по селктору. В вашем случае в документе есть 2 ноды попадающие под искомый селектор - input
.[0]
и записываете метод onclick
для 1-ого элемента. Тем самым игнорируя 2-ой элемент(2-ой инпут).onclick
.const inputList = document.querySelectorAll("input");
inputList.forEach(input => {
input.onclick = function() {
if ((input.checked == true) && (input.value == "1")) {
document.body.style.backgroundColor = "#00ff00";
} else if ((input.checked == true) && (input.value == "2")) {
document.body.style.backgroundColor = "#ccff00";
} else {
document.body.style.backgroundColor = "#03f3f3";
}
};
})