CSS 是現(xiàn)代 Web 開發(fā)中最重要且最強大的語言之一,使得我們可以輕松地掌握網(wǎng)頁樣式的外觀和布局。除此之外,它還具有廣泛的應(yīng)用場景,包括復(fù)制和粘貼到剪貼板。
/* 復(fù)制到剪貼板 */ .copy-to-clipboard { cursor: pointer; } .copy-to-clipboard::after { content: '復(fù)制'; margin-left: 0.5em; } .copy-to-clipboard:hover::after { content: '點擊復(fù)制'; } .copy-to-clipboard:active::after { content: '已復(fù)制'; } .copy-to-clipboard[data-clipboard-text]:before { content: attr(data-clipboard-text); position: absolute; left: -9999px; } /* 剪貼板樣式 */ .clipboard { position: absolute; left: -9999px; }
如上述代碼所示,我們可以通過添加偽元素 `::after` 和 `::before`,并且使用數(shù)據(jù)屬性 `data-clipboard-text` 來添加復(fù)制到剪貼板的內(nèi)容。同時,我們還需要添加樣式來隱藏到要復(fù)制的內(nèi)容。
另外,我們也可以使用第三方庫,例如 Clipboard.js,它會為我們提供更簡單、更易用的剪貼板操作。只需要在頭部加入以下代碼就可以快速開始使用。
<script src="clipboard.min.js"></script> <script> new ClipboardJS('.btn'); </script>
如此便可以輕松實現(xiàn) CSS 中的剪貼板復(fù)制功能。