Как сделать элементы серыми на основе имени класса?
Я пытаюсь плавно закрасить элементы границы серым с помощью сглаживания CSS, но это ничего не дает, а толщина элементов составляет 1 пиксель.
код:
function greyBorder()
{
var elms
elms = Array.from(document.getQuerySelectorAll(".border"))
for (var i = 0; elms[i]; i++)
{
elms[i].style.backgroundColor = "#aaaaaa"
}
}
function ungreyBorder()
{
var elms
elms = Array.from(document.getQuerySelectorAll(".border"))
for (var i = elms.length - 1; i >= 0; i--)
{
elms[i].style.backgroundColor = "#2832be"
}
}
Я попробовал все, что мог сделать
Вместо этого я использовал серые значки, чтобы они были не в фокусе;)
Вы играли с CSS box-shadow, где оси x и y установлены на 0, а радиус распространения установлен, например, 2 или 3, что может дать вам плавный вид, к которому вы стремитесь. Вы можете использовать как сплошную рамку толщиной 1 пиксель, так и тень блока, задав только радиус для растушевки границы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете попробовать вот так.
- Используйте
document.getQuerySelectorAllвместоdocument.getQuerySelectorAll. (ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) for (var i = 0; elms[i]; i++)->for (var i = 0; i < elms.length; i++)
или вы можете использовать forEach для итерации, вот так.
function greyBorder()
{
const elems = [...document.querySelectorAll(".border")];
elems.forEach((elem) => {
elem.style.backgroundColor = "#aaaaaa"
})
}
как это отвечает на вопрос? рефакторинг кода не добавляет ничего, чего еще нет в ОП. Ответы должны решать проблему, а не игнорировать ее, а просто проводить рефакторинг.
Решения, которые я дал в пунктах 1 и 2, кажутся решениями.
Вы ничего не изменили. Вы только что провели рефакторинг, чтобы сделать код короче!
1: getQuerySelectorAll -> querySelectorAll. Вот это я поменял..:)
for (var i = 0; elms[i]; i++) -> for (var i = 0; i < elems.length; i++) Это то, что я предложил в разделе 2. Причина, по которой я упомянул forEach, — просто показать другой способ. Вас может смутить то, что это похоже на рефакторинг.
да, изменение, это просто рефакторинг, не меняющий проблему, которую описывает ОП в первую очередь
Я думаю, что его изменение может решить проблему, потому что document.getQuerySelectorAll не существует.
ты уверен или догадываешься? Обратите внимание: мы говорим о фреймворке Electron, а не о ванильном JS. Если да, дайте ссылку на официальную документацию, чтобы подтвердить свой ответ.
Затем изменение условия цикла for на i < elms.length может решить проблему. Если elms[i] находится в условии условия, цикл for может никогда не закончиться. О getQuerySelectorAll найду позже
Извините, но мне не удалось найти информацию о getQuerySelectorAll с помощью быстрого поиска в Google. Было несколько неофициальных сообщений в блогах и вопросов о переполнении стека, в которых упоминался getQuerySelector, но большинство из них, похоже, были опечатками для querySelector. Если вы найдете какие-либо надежные ссылки, будем очень признательны, если поделитесь ими в комментариях.
Кажется, я не понял вашего вопроса. Вы пытаетесь изменить цвет фона элементов класса .border на серый (#aaaaaa), а затем обратно на синий (#2832be), используя функции JavaScript greyBorder() и ungreyBorder()?
Если вы хотите плавно изменить цвет фона, а не резко, я бы посоветовал вам использовать переходы CSS.
.border {
border: 1px solid black;
transition: background-color 0.3s ease;
}
.grey {
background-color: #aaaaaa;
}
.blue {
background-color: #2832be;
}
function greyBorder() {
var elms = Array.from(document.querySelectorAll(".border"));
elms.forEach(function(elm) {
elm.classList.add("grey"); // Add class to apply gray background
});
}
function ungreyBorder() {
var elms = Array.from(document.querySelectorAll(".border"));
elms.forEach(function(elm) {
elm.classList.remove("grey"); // Remove class to revert to blue
background
});
}
getQuerySlectorAllявляется чем-то электронно-специфичным? Почему бы просто не использоватьdocument.querySelectorAll('.border').forEach(elms => elms.style.backgroundColor = '#AAA')? Или почему бы просто не решить эту проблему с помощью CSS-селектора.border { background-color: #AAA }?