您的位置:首页> 前端教程> JS教程
文章导航

JavaScript className

2018-11-22 13:31| 作者: admin| 查看: 1177| 评论: 0|来自: 蚂蚁部落

className是当前(2018-11)最为常用的属性之一。

利用它可以操作DOM元素的class属性,从而实现设置元素CSS样式等功能。

之所以说它是当前最为常用的属性,是因为在可以预测的将来,很有可能被classList取代。

因为classList对元素class属性操作更为方便,HTML5新增,所以当前有很大兼容性问题。

更多内容可参阅如下两篇文章:

(1).classList参阅JavaScript classList一章节。

(2).两者区别参阅className与classList区别一章节。

className属性可以设置或者返回元素的class属性值,下面将结合代码实例详细做一下介绍。

语法结构:

[JavaScript] 纯文本查看 复制代码
elem.className=classname

通常情况下,HTML元素属性与获取它们的DOM元素对象属性是一致的

比如要获取id属性值,使用dom.id即可,但class是JavaScript中的关键字,使用className作为名称。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.set{
  width:100px;
  height:100px;
  line-height:100px;
  border:10px solid red;
  text-align:center;
}
</style>
<script> 
window.onload=function(){
  let obt = document.getElementById("bt");
  let odiv = document.getElementById("ant");
  obt.onclick = function () {
    odiv.innerHTML = odiv.className;
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="set"></div>
<input type="button" id="bt" value="查看演示"/>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/133901mxy7cpibzxj41h31.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击按钮可以将对应元素的class属性值写入div中。

大家知道,通过class属性可以一次性设置多个样式类。

代码片段如下:

[HTML] 纯文本查看 复制代码
<div class=" a   b c"></div>

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.set{
  width:100px;
  height:100px;
  line-height:100px;
  border:10px solid red;
  text-align:center;
}
</style>
<script> 
window.onload=function(){
  let obt = document.getElementById("bt");
  let odiv = document.getElementById("ant");
  String.prototype.trim=function(){ 
    return this.replace(/(^\s*)|(\s*$)/g,""); 
  } 
  Array.prototype.removeByValue = function(val) {
    let arr=[];
    for(let i=0; i<this.length; i++) {
      if(this[i] != val) {
        arr.push(this[i]);
      }
    }
    return arr;
  }
  obt.onclick = function () {
    let str = odiv.className.trim();
    let arr=str.split(" ");
    console.log(arr.removeByValue(""))
  }
}
</script> 
</head> 
<body> 
<div id="ant" class=" a  b c"></div>
<input type="button" id="bt" value="查看演示"/>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/133936kib1zoadhd8o5116.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).点击按钮后返回一个数组,数组中存放着class属性规定的各个类名。

(2).有时候class属性值写的比较随意,前后有空格,或者类名之间有多个空格分隔,但是语法上是允许的。

(3).所以自定义trim方法删除字符串两端空格。

(3).自定义removeByValue方法删除数组中的空元素。

可以看到className对于样式类的操作相对较为麻烦,因为它返回一个字符串,实质上是对字符串的操作,而classList返回的是集合,通过内置的方法操作集合更为便利简单。

特别说明:ES5新增trim方法可以删除字符两端空格。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let addBt=document.getElementById("add");
  let delBt=document.getElementById("del");
  let odiv = document.getElementById("ant");
    
  addBt.onclick = function () {
    odiv.className = "a"
  }
  delBt.onclick = function () {
    odiv.className = "b"
  }
}
</script> 
</head> 
<body> 
<div id="ant">蚂蚁部落</div>
<input type="button" id="add" value="背景色"/>
<input type="button" id="del" value="字体颜色"/>
</body> 
</html>

点击按钮可以分别设置元素背景颜色和字体颜色。

代码分析如下:

(1).className属性是重置class属性值,而不是追加class属性值,并非增量操作。

(2).作为className属性值的类名前面不要加点(.)。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv = document.getElementById("ant");
    
  obt.onclick = function () {
    odiv.className = "a b"
  }
}
</script> 
</head> 
<body> 
<div id="ant">蚂蚁部落</div>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

通过className属性可以为元素一次性设置多个样式类。

样式类之间用空格分隔,要求比较宽松,前后左右都允许有空格,且数量不限。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部