Как скопировать цвет фона элемента div в буфер обмена по щелчку?

#javascript #clipboarddata

Вопрос:

В основном, заголовок. У меня есть 4 divs, которые представляют основные 4 цвета чего-либо, они отображаются динамически, поэтому они будут разными. Что я хочу с ними сделать, так это скопировать цвет фона (в шестнадцатеричном формате) в буфер обмена при нажатии на него и отобразить сообщение с надписью «Скопировано!», И оно исчезнет через 1,5 секунды.

1. За вас проголосовали, потому что людям здесь не нравятся вопросы типа «сделай мою домашнюю работу за меня». Если вы добавите некоторый HTML и Javascript-код из того, что вы пробовали, у вас будет гораздо больше шансов получить хороший ответ!

2. хех, да, но поскольку они новый участник, я пропустил это мимо ушей

3. Да, ты прав, Хеджи, я даже не читал свой вопрос, когда я его опубликовал, это звучало так, как будто я требовал, чтобы что-то было сделано, даже не сказав спасибо. Так что извините за это; в любом случае я уже решил это, добавив интервал в элемент с шестнадцатеричным кодом и скопировав его в буфер обмена

Ответ №1:

Прежде всего, давайте предположим div , что у элемента есть идентификатор test , чтобы мы могли получить элемент.

 const el = document.getElementById('test');

Возможно, вы захотите получить его, используя имя класса, имя тега и т. Д., Но все зависит от вас.

Затем мы получаем вычисленный цвет фона:

 let bgColor = window.getComputedStyle(el).backgroundColor;

Теперь нам нужно создать текст. Затем выделите текст и скопируйте его в буфер обмена:

 let text = document.createElement('textarea');

// We don't want to see it on the page but only use it as a text holder for the moment
text.style.display = 'none';

// Append to document
document.body.appendChild(text);

// Set the background colour to it
text.value = bgColor;

// Select the text
text.select();

// Copy the text we just selected
document.execCommand('copy');

// Remove the textarea we just created
document.body.removeChild(text);

1. Мне нравится этот ответ лучше, чем мой собственный XD

2. Спасибо, новичок, за этот код, но в итоге я добавил интервал внутри DIV с шестнадцатеричным цветом в виде текста и скопировал его оттуда. Я отмечу его как решаемый, потому что он работает для основного вопроса, который я задал, с небольшими изменениями.

Ответ №2:

Я бы рекомендовал вам показать, что вы пробовали или, по крайней мере, как выглядит ваш код. Для достижения этой цели вы можете использовать метод .execCommand() в javascript (или что-то подобное). Скорее всего, вы найдете эту ссылку полезной. https://alligator.io/js/copying-to-clipboard /

1. Да, я был ленив, и я не прочитал свой вопрос, извините, если это прозвучало так, как будто я выполнял требование, спасибо и за вашу помощь, мне было полезно подумать о решении