Javascript DOM：在這種情況下如何獲取元素的類屬性值？

如下所示，在網頁上有一個input元素。Javascript DOM：在這種情況下如何獲取元素的類屬性值？

<input type = "text" class="text-input">

當我點擊它，JavaScript代碼將追加另一個階級屬性值W_input_focus如：

<input type = "text" class="text-input W_input_focus">

好了，我怎麼能得到class屬性值，除了被Javascript時附加價值我點擊輸入？我使用getAttribute（'class'）方法來檢索，但它返回所有值，包括附加的js。

這是一個例子，事實上我不知道在html代碼中哪個值被設置爲class屬性，哪個值被js附加。我如何區分，謝謝！

我已經找到一個簡單的答案：

$(input).trigger("blur").attr("class")

來源

2014-03-19 tao4yu

你的意思是你想只檢索「文字輸入」級？ – Kyo

輸出應如何顯示？你到現在爲止嘗試過什麼？ –

是的，只檢索「文本輸入」。它是一個例子，我不知道Js會追加多少類屬性值。 – tao4yu

element.className應以字符串格式提供的類名稱。您可以使用String.split(' ')以空格分隔它們（因爲類是以空格分隔）。

來源

2014-03-19 08:21:19 Joseph

這是一個例子，事實上我不知道在html代碼中哪個值被設置爲class屬性，哪個值被js附加。 – tao4yu

從js中添加的每個類都會在您已有的類名稱後附加。所以你可以得到類名，將其拆分成「」，並得到第一個元素，這是你在開始時的類名。

嘗試

HTML：

<input type = "text" class="text-input">

JS：

//ADD SOME CLASSES 
$("input").addClass("W_input_focus"); 
$("input").addClass("class2"); 
$("input").addClass("class3"); 

//GET THE CLASS YOU WANT 
$("input").click(function() { 

    var className = $('input').attr('class'); 
    var arr = className.split(' '); 
    alert(arr[0]); 

});

DEMO

只需JS，你可以嘗試

HTML：

個

<input id="input" type = "text" class="text-input W_input_focus" onclick="getClass()">

JS：

function getClass(){ 
    var className = document.getElementById('input').getAttribute('class'); 
    var arr = className.split(' '); 
    alert(arr[0]); 
}

DEMO2

來源

2014-03-19 08:23:53 laaposto

有這類案件提供一個classList API：https://developer.mozilla.org/en-US/docs/Web/API/Element.classList。檢查鏈接的例子。

這是很支持的瀏覽器IE除外（10+）：http://caniuse.com/#feat=classlist

..但有一個爲一個填充工具：https://github.com/eligrey/classList.js

要擴展這個答案：

你顯然需要什麼是Mutation Events/Observers（https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events）。尤其是DOMAttrModified，當你的className被改變時（即類被添加/刪除）它將被分派。

的支持除了在IE好（11+），並在Android瀏覽器（4.4或以上版本）：http://caniuse.com/#feat=mutationobserver

...幸好在IE瀏覽器，你可以使用onpropertychange聽衆：http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx。

一個示例（在Chrome，FF，IE10上測試）：http://codepen.io/zvona/pen/eGbur/ - >檢查控制檯的詳細信息。

來源

2014-03-19 08:25:42 zvona

的JavaScript（jQuery的無）：

function getClassNames() { 
    var element = document.getElementById('spanId'); 
    var classNames = element.className; //String containing all the classes as they are given in the attribute 
    var classes = classNames.split(' '); //Since classes have to be separated by a whitespace, this will return all 'single' classes 
}

HTML：

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script type="text/javascript" src="classNames.js"></script> 
    </head> 
    <body> 
     <input type="button" onclick="getClassNames()" value="Get Classnames"> 
     <span id="spanId" class="class1 class2"></span> 
    </body> 
</html>

來源

2014-03-19 08:29:11

Javascript DOM：在這種情況下如何獲取元素的類屬性值？

回答

相關問題