JavaScript元素點選背景顏色切換
本章節分享一段程式碼例項,它實現了點選元素實現背景切換效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { background: #F6F6F6; } div { width: 220px; border: 1px solid #e6e6e6; height: 220px; background: gray; display: table; border-radius: 50%; margin: 0 auto; } div:hover { cursor: pointer; } </style> <script> window.onload=function(){ var isOpen = false; var light = document.querySelector('#light'); light.onclick = function () { if (!isOpen) { this.style.background = 'yellow'; } else { this.style.background = 'gray'; } isOpen = !isOpen; }; } </script> </head> <body> <section> <div id="light"></div> </section> </body> </html>
相關文章
- JavaScript點選按鈕切換背景顏色JavaScript
- 點選按鈕實現切換頁面背景顏色效果
- js實現的點選連結<a>實現切換背景顏色JS
- html點選<a>元素後顏色的變換HTML
- JavaScript點選設定背景顏色的選項卡程式碼JavaScript
- 短視訊開發,點選按鈕Button,更換背景顏色
- CSS設定元素的背景顏色CSS
- JavaScript 背景顏色隨機變化JavaScript隨機
- JavaScript 點選表格行實現背景變色JavaScript
- javascript網頁背景顏色漸變效果JavaScript網頁
- 點選按鈕設定其背景顏色程式碼例項
- 2024-07-24 記錄一則切換頁面背景顏色效果
- UIButton點選更改顏色UI
- 設定toast的字型顏色和背景顏色AST
- 設定文字的選中狀態背景顏色
- 短視訊平臺原始碼,點選ul/li改變背景顏色原始碼
- Appium 切換進入 webview,點選元素偏離APPWebView
- canvas實現動態替換人物的背景顏色Canvas
- Flutter 實現“斑馬紋”背景(需要變換顏色)Flutter
- Eclipse背景顏色修改Eclipse
- iOS UISearchBar 修改背景顏色iOSUI
- css 設定背景顏色CSS
- VC 對話方塊背景顏色、控制元件顏色控制元件
- JavaScript 十六進位制顏色和RGB顏色值的相互轉換JavaScript
- 顏色轉換
- iphone 更改鍵盤背景顏色iPhone
- JavaScript點選切換div的顯示和隱藏JavaScript
- 更改NavMenu 導航選單啟用時的背景顏色
- css3 ::selection的用法(改變選中文字的背景顏色或者文字顏色)CSSS3
- UITabBarController、TabBar背景顏色設定、TabBarItem顏色處理UItabBarController
- 11個JavaScript顏色選擇器外掛JavaScript
- Flutter改變狀態列字型、狀態列背景顏色、Appbar背景顏色的方式FlutterAPP
- CSS 中的顏色、背景和剪下CSS
- CSS-背景顏色|background-colorCSS
- markdown字型顏色和背景設定
- css3背景顏色漸變CSSS3
- iOS 顏色製作背景圖片iOS
- svg 圖示設定背景顏色SVG