`
wsql
  • 浏览: 11777608 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

className（转）

 
阅读更多

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;
}

上面這段代碼將會傳回一個元素陣列，這些元素的共通點就是它們的class名稱都一樣。

下面這段代碼是getElementsByClassName(’className’)眾多應用的其中一種，可以將文件中所有className為‘black’的元素的className改為‘red’。

var classBlack = getElementsByClassName('black');
for (var i=0; i<classBlack.length; i++) {
 classBlack[i].className = 'red';
}

分享到：
| 火狐下强制换行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics