Как вывести текущий цвет страницы в alert?
Столкнулся с таким вопросом. Хочу вывести цвет текущей страницы в alert. Нижеследующий код ничего не выводит. Если использовать только background, то будет полная информация о фоне страницы, мне это не подходит. Если использовать background-color, то alert ничего не выдает. Как решить вопрос?
function knowColor() {
let page_color = '';
page_color = document.body.style.background-color;
alert("Поточний колір сторінки: " + page_color);
}
Ответы (3 шт):
Вы просто неправильно вводите background-color, в JS а конкретней в объекте style он должен записываться вот так: backgroundColor, то есть в итоге код должен быть вот такой:
function knowColor() {
let page_color = document.body.style.backgroundColor
alert("Поточний колір сторінки: " + page_color)
}
И да, не нужно указывать пустую строку чтобы потом назначить на ваш variable какую-то другую строку. Также можно узнать цвет заднего фона <body> вот так: document.body.style['backgroundColor']
"Обращения" к свойствам которые разделяются дефисом, обычно заменяется на camelCase, т.е.
background-color => .style.backgroundColor,
mix-blend-mode =>? .style.mixBlendMode и т.д.
Либо обращайтесь к свойству через квадратные скобки .style['background-image']
А вообще, вы не получите таким образом цвет, если он не задан до этого через тот же .style.backgroundColor ранее, т.к. через .style можно получить только инлайновые стили.
Чтобы получить стили CSS, лучше использовать getComputedStyle()
let body = document.body;
console.log('style '+ body.style.backgroundColor);
console.log('getComputedStyle '+ getComputedStyle(body)['background-color']);
setTimeout(function() {
console.info('смена цвета');
body.style.backgroundColor = 'green';
console.log('style '+body.style.backgroundColor);
console.log('getComputedStyle '+getComputedStyle(body)['background-color']);
}, 1000);body {background-color: orange;}