


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості моя підбірка корисних скриптів JavaScript та jQuery, які використовую у своїй роботі.
Готові скрипти на нативному JavaScript.
<form action="">
<label for="name">Name:</label><br>
<input type="text" id="form-field-name" name="name" placeholder="Your name..."><br>
<label for="email">Email:</label><br>
<input type="email" id="form-field-email" name="email" placeholder="Your email..."><br>
<input type="submit" value="Submit">
</form>
let formInputName = document.querySelector('#form-field-name');
let formInputEmail = document.querySelector('#form-field-email');
if (formInputName) {
formInputName.placeholder = '!new name!';
}
if (formInputEmail) {
formInputEmail.placeholder = '!new email!';
}
до змісту ↑
<div class="wrapper">
<div class="block-1">
<p>Test 1</p>
</div>
</div>
Наступний JS-код перевірятиме чи задане CSS-правило до блоку із класом block-1
, тобто .block-1 {display: none;}
:
let block1 = document.getElementsByClassName('block-1')[0];
// let block1 = document.querySelector('.block-1');
if (block1 && window.getComputedStyle(block1).display === 'none') {
console.log('HIDE');
} else {
console.log('DISPLAY');
}
Також замість директиви display
можна використати visibility
.
Нехай є блок із шириною та висотою, рівними 100px
. Потрібно виконати якусь дію, якщо клацнути за межами цього елементу.
<div id="wrapper">
<p>Текст</p>
</div>
#wrapper {
width: 100px;
height: 100px;
background-color: red;
}
// вибір елементу, за межами якого потрібно відслідковувати клік
let myElement = document.getElementById('wrapper');
document.addEventListener('click', function(event) {
var isClickInside = myElement.contains(event.target);
if (!isClickInside) {
console.log('Тут те, що потрібно робити, коли клацнув поза елементом');
}
});
Приклад. Задача стояла приховати окремий блок у мобільному меню, яке відкривається при натисканні на іконку бургер-меню.
let specifiedElement = document.getElementsByClassName('responsive-menu-toggle')[0];
document.addEventListener('click', function(event) {
let isClickInside = specifiedElement.contains(event.target);
if (!isClickInside) {
document.getElementsByClassName('after-mobile-menu-content')[0].style.display = 'none';
}
});