Библиотека JS » Web Мастерская

Блог

Web Мастерская

Как проверить видимый или невидимый элемент

Проверить, виден ли элемент на странице, можно несколькими способами. Видимость элемента определяется не только наличием свойства display: none, но и другими факторами, такими как высота и ширина равные нулю, видимость родителей и многое другое.

Варианты проверки видимости элемента:

Проверка с помощью jQuery

В jQuery есть специальный метод .is(':visible'), который проверяет видимость элемента:

if ($('#myElement').is(':visible')) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

Проверка с помощью чистого JavaScript

Можно воспользоваться чистым JavaScript, проверив несколько свойств элемента:

function isVisible(element) {
    const style = window.getComputedStyle(element);
    return !(style.display === 'none' ||
             style.visibility === 'hidden' ||
             parseFloat(style.opacity) <= 0 ||
             element.offsetWidth === 0 ||
             element.offsetHeight === 0);
}

const el = document.querySelector('#myElement');
if

...

Жалоба

jQuery: Как в проверить существует ли элемент

Библиотека JS

Проверить, существует ли определенный элемент на странице с помощью jQuery, можно несколькими способами. Наиболее популярны два подхода:

Проверка с помощью .length

Самый распространенный метод — проверить длину выбранного элемента с помощью свойства .length. Если длина больше 0, значит элемент существует.

if ($('#myBlock').length > 0) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Пример:Допустим, у нас есть блок с id myBlock. Если он присутствует на странице, то сообщение будет "Блок существует!". Иначе — "Блок не найден!".

Проверка с помощью оператора is()

Другой способ — использовать метод is(), который возвращает true, если выбранный элемент существует, и false в противном случае.

if ($('#myBlock').is('*')) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Примечание: Метод is('*') проверяет, есть ли хотя бы один элемент в DOM, соответствующий данному селектору.

Прямая проверка наличия элементов

Иногда бывает полезно...

Жалоба

Перевод rows в пиксели на JS и jQuery

JavaScript Библиотека JS

Представим, что есть такой textarea:

<textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

И необходимо при помощи чистого JavaScript или jQuery получить значение rows="12" и перевести его в пиксели. Как это сделать в этой статье.

Для того чтобы получить значение атрибута rows и конвертировать его в пиксели на jQuery, нужно выполнить несколько шагов:

Получить значение атрибута rows с помощью jQuery.
Преобразовать это значение в пиксели, умножив на среднюю высоту строки.

Пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример преобразования rows в пиксели</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

    <script>
        // Получаем значение атрибута rows
        var rowsCount = parseInt($('#text').attr('rows'));

        // Средняя высота строки обычно принимается равной 20 пикселям
        var

...

Жалоба

Как в JS / jQuery сделать неизменную переменную?

JavaScript Библиотека JS

В стандартной JavaScript и jQuery нет понятия «константной» переменной, как в языках программирования, таких как Java или C++. Однако есть несколько способов, которые помогут достичь аналогичного эффекта:

Способ 1: Использовать ключевое слово const

Синтаксис ES6 (ECMAScript 2015) ввёл ключевое слово const, которое позволяет объявлять переменные, которые не могут быть повторно определены:

const MY_CONSTANT = 'This is a constant';
console.log(MY_CONSTANT); // This is a constant

MY_CONSTANT = 'New Value'; // Будет ошибка: Assignment to constant variable.

Способ 2: Использовать IIFE (Immediately Invoked Function Expression)

Если нужно объявить постоянную переменную в локальном контексте, можно использовать немедленно вызываемую анонимную функцию:

(function () {
    var CONSTANT_VALUE = 'Some Constant Value';
    console.log(CONSTANT_VALUE); // Some Constant Value
})();

// Попытка доступа извне невозможна:
console.log(CONSTANT_VALUE); // ReferenceError: CONSTANT_VALUE is not defined

С

...

Жалоба

Карусель фотографий

CSS HTML JavaScript Библиотека JS

Для одной своей идеи, использовал карусель фотографий, взятую из интернета и переписанную под себя. Выложу, как было у меня. Карусель использует библиотеку jQuery, так что придется подключать её, хотя, переписать на чистый JavaScript не составит особого труда.

jQuery:

var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =

...

Жалоба