DOM属性操作和样式操作

1 属性操作

1.1 HTML attribute -> DOM property

/* 把HTML的属性转化为DOM的属性 */
---
<div>
    <label for="userName">用户名：</albel>
    <input id="userName" type="text" class="u-txt">
</div>
---
//input--html
id   -->"userName"
type -->"text"
class-->"u-text"
//input--DOM
id   -->"userName"
type -->"text"
className -->"u-txt"

//label--DOM
htmlFor -->"userName"

1.2 通过属性名访问修改属性

---
<div>
    <label for="userName">用户名：</label>
    <input id="userName" type="text" class="u-txt">
</div>
---
var input = document.querySelector('#userName');
//读取
input.className;//"u-txt"
input["id"];//"userName"
//写入属性
input.value = "LWL@126.com";
input.disabled = true;
//<input id="userName" type="text" class="u-txt" value="LWL@126.com disabled>
/* 通过属性名可以设置的属性类型为 ——>转换过的实用对象 */
/* 
   className :"u-txt"                   -->String
   maxLength :10                        -->Number
   disabled  :true                      -->Boolean
   onclick   :function onclick(event){} -->Function 
*/

//通过属性名访问的特点:通用性不好，会有名字异常；扩展性没有；但设置的直接为实用对象；

1.3 Get/SetAttribute

---
<div>
    <label for="userName">用户名：</label>
    <input id="userName" type="text" class="u-text">
</div>
---
//读取
/* var attribute = element.getAttribute(attributeName); */
input.getAttribute("class");//"u-txt"
//写入
/* element.setAttribute(name,value) */
input.setAttribute("value","LWL@126.com");
//<input id="userName" type="text" class="u-txt" value="LWL@126.com">
/* 通过get/setAttribute设置的属性类型为 ——>属性字符串 */
/* 
    class     :"u-txt"    -->String
    maxlength :"10"       -->String
    disabled  :""         -->String
    onclick   :"showSuggest();"
*/

//通过get/setAttribute设置属性的特点：只能设置字符串；但是通用性好；

以上两种属性访问修改方法的使用范例：

---
<div>
    <h2>手机号码登录</h2>
    <label for="userName">用户名：</label>
    <input id="userName" type="text">
    <label for="secuNum">密码：</label>
    <input id="secuNum" type="text">
    <button id="logbtn">登录</button>
</div>
---
//让登录按钮disabled
button.disabled = true;
button.setAttribute("class","disabled");//Are you sure ?????

1.4 dataset

/* HTMLElement.dataset */
/* data-* 属性集 */
/* 在元素上保存数据 */
---
<div id="user" 
  data-id="19910620" 
  data-account-name="LWL" 
  data-name="卢万林" 
  data-email="lwl2374@126.com" 
  data-mobile="15528332669"
>
  LWL
</div>
---
/* div.dataset.
    id          --> "19910620"
    accountName --> "LWL"
    name        --> "卢万林"
    email       --> "lwl2374@126.com"
    mobiel      --> "15528332669"
*/
//功能需求，在-卢万林-被hover的时候，在名字的右边出现一张表格，里面是个人信息；
//html
<div class="mb-s" id="p3">
<ul id="b434">
    <li id="b434li1" data-id="19910610" data-account-name="LWL" data-name="Adom|Wanlin-Lu"
        data-email="lwl2374@126.com" data-mobile="15528332668">Wanlin-Lu</li>
    <li id="b434li2" data-id="18820625" data-account-name="HYJ" data-name="huoyuanjia"
        data-email="huoyuanjia@126.com" data-mobile="18780121320">big brother</li>
</ul>
<div style="display:none" id="card">
    <table>
        <caption id="accountName"></caption>
        <tr><th>name:</th><td id="name"></td></tr>
        <tr><th>email:</th><td id="email"></td></tr>
        <tr><th>tele:</th><td id="mobile"></td></tr>
    </table>
</div>
//css
#card table th,td,caption{
    border:1px solid #888888;
    padding:2px;
    font-size:14px;
}
#card table th{
    color:#444;
}
#p3{
    position:relative;
}
#card{
    position:absolute;
    left:150px;
    top:50px;
}
#card table{
    border-collapse: collapse;
}
//js
function $(id){
    return document.getElementById(id);
}
var b434ul = $("b434");
var lis = b434ul.getElementsByTagName("li");
for(var i=0,li;li=lis[i];i++){
    li.onmouseenter = function(event){
        event = event||window.event;
        var pers = event.target||event.srcElement;
        var data = pers.dataset;

        $("accountName").innerText = data.accountName;
        $("name").innerText = data.name;
        $("email").innerText = data.email;
        $("mobile").innerText = data.mobile;

        $("card").style.display="block";
    };
    li.onmouseleave = function(event){
        $("card").style.display="none";
    };
}

dataset 兼容实现

/* dataset 兼容实现 */
function dataset(element){
    if(element.dataset){
        return element.dataset;
    }else{
        var attributes = element.attributes;
        var name = [],value = [];
        var obj = {};
        for(var i=0;i<attributes.length;i++){
            if(attributes[i].nodeName.slice(0,5)=="data-"){
                name.push(attributes[i].nodeName.slice(5));
                value.push(attributes[i].nodeValue);
            }
        }
        for(var j=0;j<name.length;j++){
            obj[name[j]] = value[j];
        }
        return obj;
    }
}
//测试dataset（element）
var b434li2 = $("b434li2");
var ss = dataset(b434li2);
console.log(ss);
//DOMStringMap {id: "18820625", accountName: "HYJ", name: "huoyuanjia", email: "huoyuanjia@126.com", mobile: "18780121320"}

2 样式操作

2.1 CSS-->DOM

//综合样式
/* document.styelSheets-->elementsheet(<link-stylesheet>|<style></style>)-->cssRules[i]--->style-->styleName */
---
<style>
    body{margin:20px;}
    p{color:#aaa;line-height:20px;}
</style>
---
//获取line-height
element.sheet.cssRules[1].style.lineHeight;//"20px"--->这句是有问题的，得不到这样的结果！！

//行内样式
/* element.style.styleName */
---
<p style="color:red;font-size:10px;">you are right,I an a paragraph</p>
---

//获取color
p.style.color;//"red"
//获取font-size
p.style.fontSize;//"10px"

2.2 更新样式

方法有两类、三种：element.style,element.style.cssText和更新element的className

---
<input id="userName">
---
//将上面input元素的边框颜色和文字颜色都设置为red

/* 方法一：element.style */
element.style.borderColor = 'red';
element.styel.color = 'red';
//该方法的问题：更新一个属性需要一条语句；不是我们熟悉的CSS

/* 方法二：element.style.cssText */
element.style.cssText = "border-color:red;color:red;";
//该方法的问题：和方法一类似，样式混合在逻辑中；

/* 方法三：更新class */
---css
.invalid{
    border-color:red;
    color:red;
}
---
//给input添加class
element.className += " invalid";//<input id="userName" class="invalid">

应用拓展：换肤

在练习的时候补充具体代码，现在只需要了解原理即可！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>换肤</title>
    <link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<div class="m-tw clearfix">
    <div class="u-img">
        <img src="res/zhm.jpg">
    </div>
    <div class="txt">
        <h3>张惠妹</h3>
        <p>中国国宝级传奇天后，被歌迷们亲切的称为‘阿妹’。但是这几年却很少看到她的演出了，或许她已经过上了另一种幸福的生活吧？</p>
    </div>
</div>
<div id="button">
    <button id="create0">创建外部样式表</button>
    <button id="create1">创建内部样式表</button>
</div>
<script type="text/javascript">
function $(id) {
    return typeof id === "string" ? document.getElementById(id) : id;
}
var Util = (function(document, util) {
    util = util || {};

    util.addEventListener = function(element, type, listener) {
        if (element.addEventListener) {
            element.addEventListener(type, listener, false);
        } else {
            element.attachEvent('on' + type, listener);
        }
    }
    return util;
})(document, Util);

Util.addEventListener($("create0"),'click',createStyleSheet0);
Util.addEventListener($("create1"),'click',createStyleSheet1);
function createStyleSheet0(){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "skin.summer.css";
    document.getElementsByTagName("head")[0].appendChild(link);
}
function createStyleSheet1(){
    var style = document.createElement("style");
    style.innerText = 'body{background-color: #fefaf7;}\
                        .m-tw .u-img{border-color: #a84c5b;}\
                        .m-tw p{color: #6d3e48;}\
                        .m-tw h3{background-color: red;}\
                        .m-tw h3 a, .m-tw h3 a:hover{color: #fff;}';
    document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</body>
</html>

2.3 获取样式

/* element.style */
---
<input type="text" style="color:red">
---
element.style.color;//'red'
//`element.style`只能获取元素的行内样式，而且获得的还不一定是元素的实际样式。

/* window.getComputedStyle() */
/* var style = window.getComputedStyle(element[,psedoElt]); */
---html
<input type="text">
---
//获取input的color
window.getComputedStyle(element).color;//"rgb(0,0,0)"
---html
<input type="text" style="color:red">
---
//获取input的color
window.getComputedStyle(element).color;//"rgb(255,0,0)"
//window.getComputedStyle是一个CSSStyleDeclaration对象（CSS属性都列出来了，数量巨大），可以在console中查看

/* ie9-中使用element.currentStyle */