DANFA
Поиск блогов...

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript
Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например:
Выделить
<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так:
Выделить
<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....

JS: От модального окна дёргается страница

JavaScript
Есть у меня код, что выводит модальное окно, чтобы подтвердить или отклонить действие:
Выделить
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};
	};

	// Другие задачи
});

Как оказалось, после нажатия, на любою кнопку, в появившемся окошке, дёргается страница, стремительно прокручивается до самого верха.

Чтобы избавиться от дёргания страницы, внутрь условия param == 'destruction', я добавил: unit.preventDefault();:
Выделить
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};

		unit.preventDefault();
	};

	// Другие задачи
});

После чего дёргание исчезло....

Как правильно писать функцию в обработчике события?

JavaScript Библиотека JS
Для примера пишем функцию: display, так:
Выделить
function display(param) {
	/* Code Function */
};

Или так:
Выделить
var display = function(param) {
	/* Code Function */
};

Теперь пробуем вызывать функцию, при клике на ссылку (class="beginning"):
Первый вариант на jQuery:
Выделить
$(document).on('click', 'a.beginning', () => {
	display('cover');
});

Первый вариант на чистом JS:
Выделить
var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click',  function() {
	display('cover');
});

Или, второй вариант на jQuery:
Выделить
$(document).on('click', 'a.beginning', display('cover'));

Второй вариант на чистом JS:
Выделить
var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click', display('cover'));

Какой из вариантов, по Вашему, будет работать, а какой нет? Работать будет первый вариант, как на jQuery, так и на чистом JS. Именно первый вариант является правильным....

Как определить, что fadeOut() полностью отработала

JavaScript
fadeOut() - служит для скрытия указанного элемента, путём затухания. Процесс исчезновения продолжается до тех пор, пока элемент полностью не станет невидимым. В качестве первого параметра метода устанавливается время продолжительности исчезновения элемента. Порой необходимо продолжить выполнение сценария, только тогда, когда функция fadeOut скроет элемент полностью. Ниже о том, как это сделать.

Чтобы продолжить выполнение сценария, только полного скрытия элемента, указываем вторым параметром метода функцию, которая возьмёт на себя выполнение кода, после исчезновения элемента.

Пример:
Выделить
$('#elID').fadeOut(5000, function() {
	alert('Ok');
});

По первому параметру видно, что элемент с id="elID" будет исчезать ровно 5 секунд (5000). Сразу, как элемент станет невидимым, отработает alert();.

Вместо alert(); будет Ваш код....

Как удалить класс у элемента на чистом JS и jQuery

JavaScript Библиотека JS
Чтобы удалить один из классов элемента на чистом JS, делаем так:
Выделить
document.getElementById('elName').classList.remove('className');

Если необходимо удалить сразу все классы, то так (Атрибут class останется пустым):
Выделить
document.getElementById('elName').className = '';

Либо так (Удалит полностью атрибут class, со всеми его значениями):
Выделить
document.getElementById('elName').removeAttribute('class');


Если требуется удалить один из классов на jQuery, делаем так:
Выделить
$("#elName").removeClass('className');

При необходимости удалить все классы разом (Атрибут class останется пустым):
Выделить
$("#elName").removeClass();

Если есть необходимость полностью удаление атрибут class, со всем его содержимым:
Выделить
$("#elName").removeAttr('class');


  • elName - Название элемента, где необходимо удалить класс.
  • className - Название класса, который необходимо удалить.
...