Как засветлить любой div элемент?

Question

[dollar]

Использую такую функцию:

//Скрыть элемент (на белом фоне)
function hideElementClever(div) {
	let hider = document.createElement('div');
	hider.style.position = 'absolute';
	hider.style.width = (div.clientWidth || 10) + 'px';
	hider.style.height = (div.clientHeight || 10) + 'px';
	hider.style.background = 'rgba(255,255,255,.7)';
	hider.style.top = '0';
	hider.style.pointerEvents = 'none';
	div.appendChild(hider);
}

Но эта функция криво работает, когда у элемента нестандартный стиль:

paddingLeft: 30px;
paddingRight: 30px;
margin: 0 -30px;

Как быть?

Comments

[dollar]

TCloud, этот самый не создает, ведь он уже существует.

Answer 1

[RAX7]

при ресайзе придется все пересчитывать

Comments

[dollar]

Спасибо. Почему-то заработало в итоге только так (костыльно):

spoiler

function hideElementClever(target) {
	const relativeParent = target.offsetParent;
	const hider = document.createElement('div');
	hider.style.position = 'absolute';
	hider.style.width = (target.offsetWidth + 60) + 'px';
	hider.style.height = target.offsetHeight + 'px';
	hider.style.background = 'rgba(255,255,255,.7)';
	hider.style.top = target.offsetTop + 'px';
	hider.style.left = (target.offsetLeft - 30) +'px';
	hider.style.pointerEvents = 'none';
	relativeParent.appendChild(hider);
}

[RAX7]

dollar, и откуда там 60px лишние берутся?

[dollar]

RAX7, не знаю :)
Вообще это список вопросов здесь, на Тостере. В качестве скрываемого элемента - li. Просто раньше эти элементы раскрашивал, а недавно добавил каждому такому элементу:

paddingLeft: 30px;
paddingRight: 30px;
margin: 0 -30px;

Чтобы цвет фона отображался во всю ширину.
Вот после этого функция hideElementClever и сломалась.

[dollar]

То есть, чтобы проверить, нужно зайти на https://toster.ru/questions и в консоли запустить следующее:

Код

//Раньше была простая раскраска
var el = document.querySelector("#js-canvas > div.layout__body > div > div > div > section > ul.content-list > li:nth-child(1)");
el.style.backgroundColor = '#f88';

//Новая фича. Без нее всё было хорошо.
el.style.paddingLeft = "30px";
el.style.paddingRight = "30px";
el.style.margin = "0 -30px";

//Ваша функция. Работает не совсем так, как ожидалось.
function hideElementClever(target) {
	const relativeParent = target.offsetParent;
	const hider = document.createElement('div');
	hider.style.position = 'absolute';
	hider.style.width = target.offsetWidth + 'px';
	hider.style.height = target.offsetHeight + 'px';
	hider.style.background = 'rgba(255,255,255,.7)';
	hider.style.top = target.offsetTop + 'px';
	hider.style.left = target.offsetLeft +'px';
	hider.style.pointerEvents = 'none';
	relativeParent.appendChild(hider);
}

hideElementClever(el)

[RAX7]

dollar, а если так:

function hideElementClever(target) {
  target.getBoundingClientRect(); // force recalc styles
  const relativeParent = target.offsetParent;
  const hider = document.createElement('div');
  hider.style.position = 'absolute';
  hider.style.width = target.offsetWidth + 'px';
  hider.style.height = target.offsetHeight + 'px';
  hider.style.background = 'rgba(255,255,255,.7)';
  hider.style.top = target.offsetTop + 'px';
  hider.style.left = target.offsetLeft +'px';
  hider.style.pointerEvents = 'none';
  relativeParent.appendChild(hider);
}

ps: хотя offsetLeft и offsetTop должны и так пересчитать стили https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[dollar]

RAX7, Всё равно не работает, как ожидалось. Не раскрашивает края у элементов, которые нужно затемнить.

Скриншот

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

[dollar]

Я и сам много чего перепробовал, перед тем, как создать вопрос. :) Всё же я не эксперт в хитросплетениях CSS.

[RAX7]

dollar,

Не раскрашивает края у элементов,

можешь на скрине показать о каких краях идет речь?

[dollar]

RAX7, Конечно. Вот эти края:

spoiler

[RAX7]

dollar, то есть у некоторых лишек есть паддинг и отрицательный маржин, а у некоторых нет?

[dollar]

RAX7, паддинг и маржин есть у всех, у которых происходит раскраска. Можно считать, что вообще у всех, потому что если его нет, то края белые и на них пофиг (засветление не вызовет проблем, пока на Тостере не введут тёмную тему). Можно паддинг и маржин вообще всем добавить для простоты.

[RAX7]

dollar,

паддинг и маржин есть у всех, у которых происходит раскраска.

если это так, то все должно работать

spoiler

//Раньше была простая раскраска
var els = [...document.querySelectorAll("#js-canvas > div.layout__body > div > div > div > section > ul.content-list > li")];
els.forEach(el => el.style.backgroundColor = "#" + (Math.round(Math.random() * 0xffffff)).toString(16).padStart(6, '0'));

//Новая фича. Без нее всё было хорошо.
els.forEach(el => {
  el.style.paddingLeft = "30px";
  el.style.paddingRight = "30px";
  el.style.margin = "0 -30px";
});

function hideElementClever(target) {
  const relativeParent = target.offsetParent;
  const hider = document.createElement('div');
  hider.style.position = 'absolute';
  hider.style.width = target.offsetWidth + 'px';
  hider.style.height = target.offsetHeight + 'px';
  hider.style.background = 'rgba(255,255,255,.7)';
  hider.style.top = target.offsetTop + 'px';
  hider.style.left = target.offsetLeft +'px';
  hider.style.pointerEvents = 'none';
  relativeParent.appendChild(hider);
}

els.forEach(hideElementClever);

spoiler

не могу понять что не так

[dollar]

Верно.
Ошибка была в том, что стили -30px применялись после hideElementClever.
Спасибо

Answer 2

[hzzzzl]

На сам объект положить комбинацию из css filter например brightness и ещё что нибудь? С телефона не могу попробовать но может что то будет подходящее

Upd
Что-то в духе
filter: saturate(0.4) brightness(1.7) contrast(0.8);

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 3

[6eJIa9IzZzTeHb]

https://jsfiddle.net/2kydzbgn/

Вот, можно обратно вынести в js

Если же нужно именно на js - нужно сделать аналог функции jQuery elem.outerWidth() / outerHeight();