JavaScript 的setAttribute兼容性解決

時間 2019-12-18

標籤 javascript setattribute 兼容性解決欄目 JavaScript 简体版

原文原文鏈接

setAttribute各個瀏覽器都支持，但在IE7如下版本中，有些屬性值仍是有差別的，好比javascript

obj.setAttribute("class","classname")

在ie8等主流瀏覽器能起效，但在IE7如下版本中不起做用，由於IE7如下版本不認得「class」,他們只認得「className」;css

單一的兼容性能夠這樣寫html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test{
            width: 100px;
            height: 100px;
            background: blue;
        }
        .turn{
            background: red;
            width: 200px;
            height: 300px;
        }
    </style>
    <script>
        window.onload = function() {
            document.getElementsByTagName('button')[0].onclick = function() {
                var div = document.getElementsByTagName('div')[0]
                if(div.getAttribute("class")){//判斷是否存在
                    div.setAttribute("class","turn");/*IE8,chrome*/
                }else{
                    div.setAttribute("className","turn")/*IE7-5*/
                }
            }
        }
    </script>
</head>
<body>
    <button>點擊切換class</button>
    <div class="test"></div>
</body>
</html>

以上代碼能夠讓setAttribute的class兼容全部主流瀏覽器java

但除了class有差別外，還有下列屬性也有差別chrome

class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
style

爲了解決上述問題就要寫一個通用的跨瀏覽器的設置元素屬性的接口方法:瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"> 
<style type="text/css"> 
.textcolor{ 
 font-size:18px; 
 color:red; 
} 
</style> 
<script type="text/javascript"> 
dom=(function(){ 
var fixAttr={ 
 tabindex:'tabIndex', 
 readonly:'readOnly', 
 'for':'htmlFor', 
 'class':'className', 
  maxlength:'maxLength', 
  cellspacing:'cellSpacing', 
  cellpadding:'cellPadding', 
  rowspan:'rowSpan', 
  colspan:'colSpan', 
  usemap:'useMap', 
  frameborder:'frameBorder', 
  contenteditable:'contentEditable'
 }, 
      
 div=document.createElement('div'); 
 div.setAttribute('class','t'); 
      
 var supportSetAttr = div.className === 't'; 
      
 return { 
  setAttr:function(el, name, val){ 
  el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); 
  }, 
  getAttr:function(el, name){ 
  return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); 
 } 
} 
})(); 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 dom.setAttr(mydiv, 'class', 'textcolor'); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

另外，一樣能夠使用element.style的方式去更改dom

例如spa

document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";

參考自:http://www.jb51.net/article/69685.htm.net

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。