<!-- 90 = x + width, 168 = y + height - правый нижний угол книги -->
<g transform="translate(90, 168.5)">
<g id="book">
<rect class="fil0 str0" x="60" y="18.5" width="30" height="150" transform="translate(-90, -168.5)" />
</g>
</g>
цифры мешают нажимать на места, а z-index изменить не получается
clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
button.toggleClass('active');
});
});
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', event => {
event.target.toggleClass('active');
// Или так, если есть вложенные элементы
// event.target.closest('.button').toggleClass('active');
});
});
event.target
– это кликнутый элемент.document.addEventListener('click', ({ target }) => {
if (!target.classList.contains('button')) return; // не тот клик
target.classList.toggle('active');
});
const isEmpty = obj => Object.keys(obj).length <= 2;
console.log( isEmpty({ a: "AAA" }) ? 'object is empty' : 'object is full of properties' );
// выведет "object is empty"
console.log( isEmpty({ a: "AAA", b: "BB", c: "C" }) ? 'object is empty' : 'object is full of properties' );
// выведет "object is full of properties"
<script>
function onEntry(entry) {
entry.forEach(change => {
if (change.isIntersecting) {
change.target.classList.add('element-show');
}
});
}
let options = {
threshold: [0.5] };
let observer = new IntersectionObserver(onEntry, options);
let elements = document.querySelectorAll('.element-animation');
for (let elm of elements) {
observer.observe(elm);
}
</script>
.element-animation{
top: 0px;
opacity: 0;
position: relative;
}
.element-animation.element-show{
position: relative;
top: -20px;
opacity: 1;
transition-duration: 1.4s;
}
this
.logger()
в вашем примере, this === window
.