className（转）

获取HTML元素class属性的JavaScript方法

最新推荐文章于 2024-08-03 01:19:16 发布

最新推荐文章于 2024-08-03 01:19:16 发布 · 163 阅读

文章标签：

#javascript #ViewUI

className

className属性，可设置或返回元素的class属性。

Syntax语法

object.className=classname

Example举例

The following example shows two methods on how to get the class attribute for the <body> element:
下面的举例中展示了两种如何得到<body>元素class属性的方法：

<html>

<body id="myid" class="mystyle">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body CSS class: " + x.className);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').className);

</script>

</body>

</html>

Output:

Body CSS class: mystyle

An alternate way: mystyle

javascript通过className獲取文件元素

在JavaScript內建的核心中，document物件及Element物件總共可以透過三個方式來獲取其下的元素，分別是:

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')

這些方法就跟它們的名字一樣，分別是依照id, name, tag來獲取元素。

因在同一份文件中，id是具有唯一性的，所以getElementById(id)的回傳值是單一物件可以直接使用；而其他則會傳回一個依照具有該屬性的元素在文件中出現順序排列的陣列，使用時必須指定陣列編號，如: array[0]代表第一個元素。

可是在設計網頁時，最常常需要使用到的class卻沒有相對應的方法可以去獲取className相同的元素。

沒有沒關係，我們自己寫一個，而且代碼非常簡短只有下面幾句。

function getElementsByClassName(n) {
var el = [],
_el = document.getElementsByTagName('*');
for (var i=0; i<_el.length; i++ ) {
if (_el[i].className == n ) {
el[el.length] = _el[i];
}
}
return el;
}