之前看了简书的文章，今天心血来潮我也凑一下热闹，顺便当做自己的日记，本文主要是针对IE下的设置class问题进行总结，不喜欢低版本的IE小伙伴们可以略过！！！
相信大家对setAttribute这个API不陌生，而且无论是在工作中、练习代码中，只要涉及到DOM操作，就一定会用这个API。可是呢，setAttribute支持现在大部分的主流浏览器，可是在IE中虽然可以设置属性名，但又会出现一个问题，至于什么问题，小伙伴们可以往下看一看。
为了照顾一下初学的JavaScript新手，我借鉴了MDN对API的描述（不对，是粘贴复制~~），让小伙伴们可以更好的了解本文所讲述的API。
特别说明：我只在IE和chrome谷歌浏览器进行了测试，因为电脑配置老，带不动。
对于火狐和欧朋浏览器我并没有装，不知道效果是否一致，有兴趣的小伙伴可以进行测试~~~
1.主流设置属性的setAttribute
首先呢，大家先看一下MDN对setAttribute的解释：
设置指定元素上的一个属性值。如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。
语法就是这样：
element.setAttribute(name, value);
name: 是表示属性名称的字符串;
value: 是属性的新值;
有人会说，setAttribute我们都熟悉，还用你告诉么？笑话！对于这一点呢，只是对新手一个提示，温故而知新么。本文有关的API小伙伴们可以去MDN去查阅。
好了，不开玩笑了，切入正题。
既然我们知道语法了，而且会使用，对主流浏览器都支持。
但是呢，在IE中利用setAttribute设置class属性有一个小小的问题。
来看一下非常简单的代码：
这是一段非常简单的封装代码，大家都会看的懂，我们来看一下测试效果：
我们可以看到setAttribute在IE8设置class属性是显示正常的（IE8及以上也显示正常！！），但在IE8以下虽然能设置属性，但就不能应用style样式，来看一下效果：
咦？已经成功设置了class属性，但为什么不能应用样式呢？这就要说起IE的兼容性问题了。众所周知啊，我们写代码基本都要照顾IE这个搞事情的浏览器，而有的公司呢也非常奇葩，也要兼容IE7，what?这个就很致命了，一听这个相信大家头都会大的。的确，要想照顾这个搞事情的IE浏览器，我们不得不查阅很多资料，但是也不能完全的照顾这个低版本的IE！
有的小伙伴说了，Jquery在手，天下我有！是的，用Jquery的人来说呢，对于这个兼容性不需要担心，Jquery内部都已经解决好这个跨浏览器的差异。
但是用久了Jquery的小伙伴来说，很多的JavaScript的特性根本不了解，不知道Jquery内部是怎样实现的，这对于学习JavaScript小伙伴来说不是很好的习惯，我还是建议用原生的JavaScript进行写代码，写久了好处多多，时间长了，相信小伙伴们也会创作出优秀的库~~~
说的有点跑偏了，总之对于IE和主流浏览器之间的不同也是很多，比如最常见的内存泄露、删除DOM元素后，DOM元素还会存在于文档中，还有个专属名词，叫什么超空间！！以及DOM事件等等一系列的头疼的问题。
要想解决上面的代码，兼容IE7的话，就需要改成下面的代码：
哎？等等，不是和上面的代码差不多么？没错，和上面的代码差不多，唯一的区别就是要把样式名字设置为" className "这个属性，至于为什么要设置这个东西，还有待研究，有大神知道的可以指出，下面来看一下修改代码后的效果：
可以看到，这回基本没有什么问题了，已经成功应用class样式，以上只是测试设置class属性！！
小伙伴们可以发现setAttribute本身是可以如预期那样是可以正确的设置class属性名，但却在低版本的IE下是不能正确应用样式的，这个要注意一下！！
但是对于低版本的IE浏览器要写className，高版本的IE浏览器className是不识别的，必须要用class，哎，如此写两遍，感觉非常麻烦。那，还有有没有别的方法呢？
当然还有别的办法，有人会说用HTMLElement类型进行设置，比如" div.id = value "，但又很局限，就那几个可以设置/获取的属性。
还有粗暴的方法" div.className = value "，当然这个也可以设置。
2.神器setAttributeNode
终于到了我们期待已久的主角" setAttributeNode "，这个API可相当厉害了，只不过我们不常使用。
小伙伴们不知道知不知道这个API呢？它可是一件凶（胸）器~~~，嘻嘻，你懂得。
咳咳，好了，不开玩笑了，来看一下MDN对setAttributeNode解释：
setAttributeNode()：为指定的 Element 添加属性节点.
短短的一句话，对不熟悉这个API的情况下，是一脸懵圈。我们来看一下语法：
var replacedAttr = element.setAttributeNode(attribute);
attribute：是添加到 element 中的属性节点.
replacedAttr：是被替换掉的属性节点。 如果存在原有属性, 则函数返回原有属性节点.
到底是什么意思呢？简单地说就是setAttributeNode这个API接收一个参数，也就是你要设置的属性，如本文中测试的class属性，你可以把class传入到这个API里。返回值就不说了，比较详细。
那么问题来了，怎么用这个setAttribute呢？很简单，它需要和createAttribute配合使用的，因为createAttribute是创建属性的，再来看一下createAttribute的解释：
createAttribute 方法创建并返回一个新的属性节点.
语法呢，就是这样：
var attribute = document.createAttribute(name)；
attribute：是一个属性节点.
name：是属性节点的属性名.
其中name是你要设置的属性名字，比如class。而attribute是createAttribute返回后的属性名。换句话说就是createAttribute()函数return了一个你设置的属性名~~~
好了，了解了这两个API后，我们要在IE浏览器下测试一下是否能解决在IE8以下不用className设置class属性名并且又能成功的应用style样式呢？
废话不多说，上代码：
这个函数也一样非常的简单，首先我获取了id为div的元素，然后利用createAttribute这个API创建了class属性名，然后在设置属性值name.nodeValue = value这句代码。注意一下，这里的nodeValue也可以替换成value，就像这样name.value = value，效果是一样的，根据你的喜欢！
然后呢，我们看一下效果是怎样的，是否能预期的按照我们的想法实现呢？
小伙伴们可以看到在IE7下，效果是正常的，成功的设置了class属性，并且也已经正确的设置了style样式。不止在IE7，在IE8、IE9、IE10、IE11甚至在IE5下也是正确显示的，小伙伴们如果不相信的话可以动手试试哦~~
好了，以上就是在IE下设置class属性的方法了，下面我贴一下可以跨浏览器设置属性的代码，目测现在没什么问题，如果小伙伴在试代码的过程中出现问题了，希望指出！
这段封装的代码使用TypeScript这个超集写的，如果不熟悉TypeScript语法的小伙伴可以去官方文档是学习一下，强类型的JavaScript。
3.代码详解
这个函数接收三个参数，元素名字，要设置的属性名，对应属性名的值
首先是判断是IE还是别的浏览器，比如谷歌啊，火狐啊，欧朋这些主流的浏览器。这里注意一下，我使用getAttribute和navigator对象来判断是IE的版本的，因为getAttribute在IE8以下（注意不包括IE8）取到的值是null，IE8及以上是正常输出值的。
如果是IE8以下就用setAttributeNode()和createAttribute()这两个API进行设置属性，如果是主流浏览器的话，就用标准中的setAttribute()设置属性。这样的话，在IE中和在其他主流浏览器中都是可以正常运行的。
最后return true 是告诉外界设置成功，我并没有排除出现错误的情况下，所以小伙伴们可以将代码改造一下，用try...catch，以免出错~~~
至于为什么我只判断版本号小于8，因为在IE9+基本都和其他主流浏览器基本一致，IE9+是处于标准模式的，所以区别还是很小的，主要是对于低版本的IE浏览器。
代码非常简单，对于不熟悉TypeScript的小伙伴去看一下官方文档，会基础就能看懂代码啦！！！
4.感言
最后感谢看到本章的小伙伴们，如有什么问题欢迎指出，第一次写文章写的不太好，大家谅解一下，谢谢！！！
