来自不同浏览器的访问元素属性给出不同的结果

我试图做一个（非常简单）测试来访问来自不同浏览器的HTML元素属性，结果是不同的。一切工作在Chrome中，但...就在它上面。没有火狐，没有边缘，没有IE和Safari浏览器。来自不同浏览器的访问元素属性给出不同的结果

所以，问题是我如何得到结果，我知道，because var elements = document.querySelectorAll('input[data-request="2"]');创建不同的对象。例如，使用网络检查器，在Chrome中我已经有了Attributes标签，而在Edge中并不存在（甚至不显示className！）。

我需要在一个变量内循环，不能使用$(#obj).class('attrName')。为了让自己清楚我做了一个jsFiddle的例子。

https://jsfiddle.net/BlackShawarna/qLxqtsqz/

感谢大家的帮助

来源

2017-07-19 BlackShawarna

好了，我只是想出了最基础的事情，我可以尝试。

Using .getAttribute('nameAttr') made the trick.

来源

2017-07-19 18:17:00 BlackShawarna

是，每个浏览器将以不同的方式进行订购，其中Mozilla的名字对其进行排序，但由镀铬他们的位置呢。所以在chrome中，array中的第4个prop是'data-rule'，但是在firefox中它是'type' prop。 –

给下面的代码很短，

$('input[data-request=2]').each(function(index){ 
    var className = $(this).attr("class"); 
    var selectID = className.split('_')[2]; 
    var selectName = className.split('_')[1]; 
    var value = $(this).attr('data-value'); //data-value 
    var rule = $(this).attr('data-rule'); //data-rule 
    var str = selectID + "\n" + selectName + "\n" + value + "\n" + rule + "\nElement Index " + index; 
    $("#result").append(str); 
    $("#result").append($('<br/>')); 
});

这段JavaScript代码给出了相同的结果，在Chrome和Firefox浏览器。

使用以下HTML结构：

<input class="hidden_1_4" type="hidden" data-request="2" data-value="0" data-rule="Equal" /> 
<input class="hidden_1_4" type="hidden" data-request="3" data-value="0" data-rule="NotEqual" /> 
<input class="hidden_1_5" type="hidden" data-request="2" data-value="0" data-rule="Equal" /> 
<div id="result"></div>

JSFiddle

来源

2017-07-19 18:25:05 yashgarg1232

来自不同浏览器的访问元素属性给出不同的结果

回答

相关问题