web前端 -- Day18 js基础

设置元素的样式方式

1. 对象.style.属性=值;
2. 对象.ClassName=值;
3. 对象.style="属性:值”;

兼容代码

1. innerText和textContent的兼容问题
   目前的浏览器都支持innerText，应该是属于ie的标准
   textContent本身是火狐支持，IE8不支持

2. innerText和innerHTML的区别
   都可以设置标签的文本内容，如果要设置标签及内容推荐使用innerHTML；如果要获取标签中的文本，使用innerText，也可以使用innerHTML；如果想要获取的是标签，也有文本使用innerHTML。

 // 设置任意标签中间的任意文本内容
function setInnerText (element,text) {
    // 判断浏览器是否支持这个属性或是判断这个属性的类型是不是 undefined
    if (typeof element.textContent == "undefined") {
        element.innerText=text;
    }else {
        element.textContent=text;
    }
}
// 获取标签中间的文本内容    
function getInnerText (element) {
    if (typeof element.textContent == "undefined") {
        return element.innerText;
    }else {
       return element.textContent;
    }
}

// 测试
my$("btn").onclick = function(){
    onsole.log(getInnerText(my$("dv")));
}

如果使用innerText只要是设置文本的，设置标签内容，是没有标签效果的
innerHTML是可以设置文本内容，其作用是在标签中设置新的html标签内容，是有标签效果的

总结：
1、想要设置标签内容，使用innerHTML
2、想要设置文本内容，innerText或者textContent或者innerHTML，推荐使用innerHTML
3、如果想要标签和内容，使用innerHTML
4、如果想要设置标签使用innerHTML
5、想要设置文本innerText或者textContent或者innerHTML
6、innerHTML才是真正获取标签中间的所有内容

自定义属性的操作

自定义属性：标签原本没有这个属性，为了存储数据，用户自己添加的属性，自定义属性无法直接通过DOM对象的方式获取或是设置

1. 对象.getAttribute("自定义属性的名字");获取自定义属性的值
2. 对象.setAttribute("属性名字","值");设置自定义属性及值
3. 对象.removeAttribute("自定义属性的名字");移除自定义属性