2. 程式人生 > >JS 點選事件onclick：點選物件小區域顏色，大區域顏色改變

JS 點選事件onclick：點選物件小區域顏色，大區域顏色改變

阿新 • • 發佈：2019-02-16 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0px;padding: 0px;border-collapse:collapse;}
            #firtsdiv{width: 400px;height: 100px;border: 1px solid green;}
            #firtsdiv
 
>div{width: 400px;height: 50px;border: 1px solid blue;}
            .span>span{width: 90px;height: 30px;float: right;margin: 5px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var spans=document.getElementsByTagName("span");
                for
 
 (var i=0;i<spans.length;i++) {
                    spans[i].onclick=function(){
                        document.getElementById("showdiv").style.backgroundColor=this.style.background;
                    }
                }
            }
        </script>
    </head>
    <body>
        <div
 
 id="firtsdiv">
            <div id="showdiv"></div>
            <div class="span">
                <span style="background:black;"></span>
                <span style="background: blue;"></span>
                <span style="background: blueviolet;"></span>
                <span style="background: red;"></span>
            </div>
        </div>
    </body>
</html>

這裡寫圖片描述

相關推薦

JS 點選事件onclick：點選物件小區域顏色，大區域顏色改變

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

JS的點選事件 onclick

onclick 點選事件 onclick 以文字de放大與縮小為例項 嗨… 各位小可愛們，我們又見面了 先來了解一下定義和用法 onclick 屬性在單擊滑鼠時觸發。 記住是 單擊單擊單擊！！！ 只點擊一次即可觸發事件 廢話不多，直接上程式碼，希望能對你們有所幫助

js 各種事件 如：點選事件、失去焦點、鍵盤事件等

事件驅動：         我們點選按鈕 按鈕去掉用相應的方法。                  demo：              <input type="button" value="點選" onclick="func()">             

android 在.xml裡面新增點選事件onclick屬性，報錯java.lang.IllegalStateException: Could not find method

每天隨時都在寫onclick方法，自己寫的發現一個問題，在xml中定義 看報錯資訊： java.lang.IllegalStateException: Could not find method onClickButton(View) in a parent or ancestor

在IE6、8中 、button點選事件(onclick)沒得反應經驗總結

首先宣告我不經常寫js程式碼.對瀏覽器的相容性積累經驗不夠,特別是IE6、7、8的相容,總結此文章以便自己和大家一起積累,少花不必要的時間。 下面是我的js程式碼: /**** 儲存修改資料* @return*/function saveConten(){$.ajax({t

html多選框點選事件onclick

當點選表格裡的一個多選框時，出發一個事件並判斷多選框是否選中 e += "<input name = 'enable_a' type='checkbox' checked = 'checked'

unidbgrid列點選事件與check多選框衝突

procedure TMainForm.UniDBTreeGrid2AjaxEvent(Sender: TComponent;   EventName: string; Params: TUniStrings); begin   UniServerModule.logger.Ad

RecyclerView item內部點選事件、item點選事件衝突

1.recyclerview item內部控制元件沒有點選事件 在recyclerview item內部控制元件不存在點選事件的情況下。item設定點選事件可通過新增觸控事件 recyclerv

EditText點選事件——彈出單選框

目標 點選Faculty彈出院系單選對話方塊，將選擇的內容顯示在EditText中 Faculty是一個Edittext控制元件。 1,設定EditText屬性 使用以下兩句設定

如何在點選事件中取得複選框選中的單元格值

var products = [];    var ordernums = [];    var ordernums1 = [];    var $span = $('.fr-checkbox-checkon');  //獲取選中的複選框  var $tds = $("td"

Android:處理ListView條目中的Button的點選事件和條目點選事件衝突

一 . 此條方法比較笨.       給條目中的1號區域的Button設定完了點選事件後,再給條目中的2號區域再設定點選事件 二 . 這個方法就比較簡單.     1 . 在ItemView配置的xml檔案中的根節點新增屬性android:descendantFocus

點選事件不生效,點選不起作用，多半是元素被遮擋。css元素被遮擋，選擇不到

有過js控制點選不生效的時候嗎，這時就要考慮你的元素是否被其他元素遮擋了。這裡說的遮擋並不是看不到。而是能看到，卻無法透過另一元素選中它。 可以試一下以下兩種方案： 1、css調節z-index 首先要考慮的是更外層的元素遮擋了靠裡層的元素。比如外層遮擋為

ios h5 點選事件失效及點選延遲

1.ios h5 app avalon tap事件失效 使用MUI製作app介面,使用avalon.js渲染資料,發現在(Android上正常)ios上執行時容器div的avalon的ms-on-tap被內容遮住不執行.用MUI的on tap事件可以執行但改動較大,於是

echarts2.* tree樹形圖節點點擊事件和節點點擊圖標更改

tree echarts 點擊事件 做項目用到echarts2.2.7版本做樹圖，遇到點擊樹圖節點更改樣式，百度、谷歌搜索後均沒找到解決方案。後來苦苦探索，終於找到解決入口，特地分享給大家以供參考，吐槽一下echarts的api真的沒有highcharts人性化和易找。 //貼出關鍵點！

APP上點擊事件時 取消點擊的陰影

kit highlight for box all drag web 點擊 :after *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizi

處理點雲資料(四)：點雲到影象平面的投影

點雲到影象平面的投影 座標系的定義 相機（x：右，y：下，z：前） 點雲（x：前，y：左，z：上） 讀取感測器校準引數 在KITTI資料集raw_data中有兩個感測器校準引數檔案calib_cam_to_cam.txt(相機到相機的標定) 和

js繫結事件方法：addEventListener與attachEvent的不同瀏覽器的相容性寫法

js的事件繫結方法中，ie只支援attachEvent,而FF和Chrome只支援addEventListener，所以就必須為這兩個方法做相容處理，原理是先判斷attachEvent只否為真（存在），如果為真則用attachEvent（）方法，否則的話就用addEvent

安卓 ListView中點選事件獲取Item中的物件

註明: ListView的物件 : mListView 繼承於BaseAdapter自定義的adapter ResultItem:每個Item資料的類private ListView mListVie

Android開發：通過樣式修改SeekBar背景顏色，進度條顏色，滑塊圖片

通過樣式style修改 seekBar 的 背景、進度、遊標等圖片。 佈局檔案： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.and

程式實現對資料排序並按出現次數進行排序 程式實現對資料排序並按出現次數進行排序（注：用面向物件的方式實現，用for迴圈進行排序，別用comparable介面實現）{1，4，2，1，3，2，1，4}作為

程式實現對資料排序並按出現次數進行排序 程式實現對資料排序並按出現次數進行排序（注：用面向物件的方式實現，用for迴圈進行排序，別用comparable介面實現）{1，4，2，1，3，2，1，4}作為引數(引數可變)傳入java方法中，控制檯輸出以下結果 1出現了3次 2出現了2次