css样式的零碎用法总结

     样式的动态添加：

   （其中红色字体是动态添加样式的语句），这是一个动态生成无序列表的函数，用来显示搜索到的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命名空间前缀。