JavaScript：实现'element.hasAttribute'如果未定义[for IE7]

问题描述

代码使用 element.hasAttribute 广泛地使用IE7有这个方法的问题。

如果一个输入元素具有 hasAttribute 方法定义，如果没有，我试图将它添加到所有输入元素。

  //创建一个输入元素变量<<<工作正常
 var myInput = document.createElement（input）; 
 
 //查看它是否具有'hasAttribute'方法<<<条件工作正常
如果（（'hasAttribute'in myInput）== false）
 {
 
 //将所有输入元素导入objInputElements<<工作正常
 var objInputElements = document.getElementsByTagName（input）; 
 
 //需要更多代码 - 为数组中的所有
 //元素实现hasAttribute函数可能使用
 // like：!! element [attributeName]在IE7。请参阅下面的链接和注释。 
} 
  

本文介绍如何定义一个独立的函数来执行此操作。但是，如果未定义元素，我想将 hasattribute 方法添加到元素中。 （这种方式我不需要更改当前写的所有代码）

重要提示：因此，有大于1000个隐藏的输入字段，因此 hasattribute'方法需要以非常有效的方式添加到元素中。

请让我知道我该如何实现。谢谢！

解决方案

由于 Element.prototype 不支持IE< ; 8，没有有效的方式来填充 hasAttribute 。低效的方式（如果你想避免匀场）将是这样的（放在所有输入已经加载之后）：

  ; input data-abc =/> 
< script> 
 
 if（！window.Element ||！window.Element.prototype ||！window.Element.prototype.hasAttribute）{
 
（function（）{
函数hasAttribute（attrName）{
 return typeof this [attrName]！=='undefined'; //您也可以检查getAttribute（）对null，尽管这可能会导致任何旧的浏览器（如果有的话）遵循旧的DOM3方式返回一个空字符串的空字符串（但是根据上面的检查没有hasAttribute），请参见https://developer.mozilla.org/en-US/docs/ Web / API / Element.getAttribute 
} 
 var inputs = document.getElementsByTagName（'input'）; 
 for（var i = 0; i< inputs.length; i ++）{
输入[i] .hasAttribute = hasAttribute; 
} 
}（））; 
 
} 
 
 var inputs = document.getElementsByTagName（'input'）; 
 document.write（
'has？'+ inputs [0] .hasAttribute（'abc'）// false 
）; 
 document.write（
'has？'+ inputs [0] .hasAttribute（'data-abc'）// true 
）; 
 
< / script> 
  

I need to make an exisitng web application compatible with IE7.

The code uses element.hasAttribute extensively and IE7 has issues with this method.

I am trying to check in the code if an input element has the hasAttribute method defined and if not, I am trying to add it to all input elements.

//create an input element variable << works fine
var myInput = document.createElement("input");

//see if it has the 'hasAttribute' method << condition works fine
if (('hasAttribute' in myInput)==false)
{

    //get all input elements into objInputElements <<works fine
    var objInputElements=document.getElementsByTagName("input");

    // MORE CODE NEEDED - To implement a hasAttribute function for all 
    // elements in the array probably using something
    // like: !!element[attributeName] which works in IE7. See link and notes below.
}

This article describes how to define a seperate function to do this. However, I would like to add the hasattribute method to the elements if it is not defined. (this way I don't need to change all the code that is currently written)

IMPORTANT NOTE: There are > 1000 hidden input fields in the form therefore, the 'hasattribute' method needs to be added to the elements in a very efficient way.

Please let me know the how I could achieve this. Thank you!

解决方案

Since Element.prototype is not supported IE < 8, there is no efficient way to polyfill hasAttribute. The inefficient way (if you wanted to avoid shimming) would be something like this (placed after all inputs had loaded):

<input data-abc="" />
<script>

if (!window.Element || !window.Element.prototype || !window.Element.prototype.hasAttribute) {

(function () {
    function hasAttribute (attrName) {
        return typeof this[attrName] !== 'undefined'; // You may also be able to check getAttribute() against null, though it is possible this could cause problems for any older browsers (if any) which followed the old DOM3 way of returning the empty string for an empty string (yet did not possess hasAttribute as per our checks above). See https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute
    }
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].hasAttribute = hasAttribute;
    }
}());

}

var inputs = document.getElementsByTagName('input');
document.write(
    'has?' + inputs[0].hasAttribute('abc') // false
);
document.write(
    'has?' + inputs[0].hasAttribute('data-abc') // true
);

</script>

这篇关于JavaScript：实现'element.hasAttribute'如果未定义[for IE7]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！