Question

如下所示，网页上有一个input元素。

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

当我点击它时，Javascript代码会附加另一个类属性值W_input_focus，例如：

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

那么，当我点击输入时，如何获取除Javascript附加的值之外的class属性值？我使用getAttribute（＆＃39; class＆＃39;）方法来检索，但它返回包含附加的js的所有值。

这是一个例子，实际上事先我不知道在html代码中哪个值设置为class属性以及哪个值附加了js。我怎么能区分，谢谢！

我找到了一个简单的答案：

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

Answer 1

这种情况可以使用classList API：https://developer.mozilla.org/en-US/docs/Web/API/Element.classList。查看链接以获取示例。

除IE（10+）以外的浏览器也支持它：http://caniuse.com/#feat=classlist

..但是有一个polyfill：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/ - ＆gt;检查控制台了解详情。

Answer 2

element.className应以字符串格式提供类名。您可以使用String.split(' ')用空格分隔它们（因为类用空格分隔）。

Answer 3

你从js添加的每个类都附加在你已经拥有的类名之后。所以你可以获取classname，将其拆分为“”并获取第一个元素，这是你在开始时拥有的类名。

尝试

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

Answer 4

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>

Javascript DOM：如何在这种情况下获取元素的类属性值？

4 个答案: