來自不同瀏覽器的訪問元素屬性給出不同的結果

我試圖做一個（非常簡單）測試來訪問來自不同瀏覽器的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

來自不同瀏覽器的訪問元素屬性給出不同的結果

回答

相關問題