樣式的動態新增：

   （其中紅色字型是動態新增樣式的語句），這是一個動態生成無序列表的函式，用來顯示搜尋到的wifi訊號，其中有3個引數，wifi的名稱、加密方式、訊號強度。

// create a network list item
function newListItem(network, averageSignalStrength) {
    /**
     * A Wi-Fi list item has the following HTML structure:
     *   <li>
     *     <div>"signalStrength"+ dbm</div>
     *     <small> Network Security </small>
     *     <a [class="wifi-secure"]> Network SSID </a>
     *   </li>
     */

    // ssid
    var _ = navigator.mozL10n.get;
    var ssid = document.createElement('a');
    ssid.textContent = network.ssid;

    var div = document.createElement('div');
    var str_css ="position: absolute;left: 50%; right: 3rem; top: 45%; padding-top: 0.4rem; font-size: 1.4rem; color: #505859; pointer-events: none;";
 

    div.style = str_css;

    if (!averageSignalStrength)
        div.textContent = 'strength:'+ network.signalStrength + 'dbm';
    else
        div.textContent = 'strength:'+ averageSignalStrength + 'dbm';

    // supported authentication methods
    var small = document.createElement('small');
    var keys = network.capabilities;
    if (keys && keys.length) {
        small.textContent = _('securedBy', { capabilities: keys.join(', ') });
        small.textContent = keys.join(', ');
    } else {
        small.textContent = _('securityOpen');
        small.dataset.l10nId = 'securityOpen';
    }


    // create list item
    var li = document.createElement('li');
    li.appendChild(div);
    li.appendChild(small);
    li.appendChild(ssid);

    return li;
}
 

樣式的顯示和隱藏：

  遍歷標籤       exp = document.getElementById("exp"); 

  隱藏標籤       exp.style.display = "none";

  顯示標籤       exp.style.display = "list-item";

Padding屬性定義元素邊框與元素內容之間的空間。

padding 簡寫屬性在一個宣告中設定所有內邊距屬性。設定所有當前或者指定元素內邊距屬性。該屬性可以有1到4個值

語法結構

padding-top:20px;上內邊距
padding-right:30px;右內邊距
padding-bottom:30px;下內邊距
padding-left:20px;左內邊距
padding:1p四邊統一內邊距
padding:1px1px上下,左右內邊距
padding:1px1px1px上,左右,下內邊距
padding:1px1px1px1px上,右,下,左內邊距
 

evt、evt.target表達的意思

用於獲取瀏覽器事件物件，由於瀏覽器之間的不相容性，所以事件物件定義也不太一樣，造成了我們這些程式設計師只好寫一些類似這樣的相容多種瀏覽器的程式碼
window.event只有微軟的IE支援，
而evt是Firefox支援的
這幾行程式碼，用於獲取到不同瀏覽器的事件物件，以得到觸發事件的源物件

querySelector()的用法

querySelector()方法接受一個CSS查詢並返回匹配模式的第一個子孫元素，如果沒有匹配的元素則返回null。請看下面的例子：

//獲取body元素
var body = document.querySelector("body");
//獲取ID為myDiv的元素
var myDiv = document.querySelecotr("#myDiv");
//獲取第一個包含類selected的元素
var selected = document.querySelector(".selected");
//獲取第一個包含類button的影象元素
var img = document.body.querySelector("img.button");

當querySelector()方法應用Document型別上時，它會嘗試從文件元素開始匹配模式。如果應用與Element型別，查詢則只會嘗試從該元素的子孫節點中尋找匹配。

CSS查詢可以根據需要複雜化或簡單化。如果查詢中有語法錯誤或者有不支援選擇器，那麼querySelector()或丟擲一個錯誤。

querySelector()方法還接受可選的第二個引數，它是一個名稱空間解析器，就是一個接受一個名稱空間字首並返回其相關URI的函式，類似於：

var nsresolver = function (prefix) {
        switch (prefix) {
        case "w3cmm":
            return "http://www.w3cmm.com";
            //此處其它程式碼
        }
    }；

名稱空間解析器對於在嵌入了其它語言諸如SVG或MathML的XHTML文件中執行查詢非常有用，XML文件亦如此。CSS查詢中的名稱空間是使用一個管道來指定的，如下：

var svgImage = document.querySelector("svgsvg", function (prefix) {
    switch (prefix) {
    case :"svg":
        return "http://www.w3.rog/2000/svg";
    }
});

這個例子通過在文件中查詢定義為<svg:svg>的元素返回了第一個SVG影象。當在查詢中遇到了svg名稱空間字首時，則呼叫名稱空間解析器函式來確定URI。沒有名稱空間解析器，則會丟擲一個錯誤，因為查詢引擎無法辨識svg名稱空間字首。