JavaScript Element className 属性

• 

  JavaScript Element className 属性

  className属性设置或返回元素的类名（元素的类属性的值）。

  提示： className的类似属性是classList属性。

  实例：

  设置id为“myDIV”的<div>元素的类：

  document.getElementById("myDIV").className = "mystyle";
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  className	支持	支持	支持	支持	支持

• 

  语法

  返回className属性：

  HTMLElementObject.className

  设置className属性：

  HTMLElementObject.className = class
• 

  属性值

  属性	描述
  class	指定元素的类名。 要应用多个类，请用空格分隔它们，例如“test demo”

• 

  技术细节

  项目	描述
  返回值：	一个字符串，表示元素的类或以空格分隔的类列表
  DOM版本	Core Level 1

• 

  更多例子

  获取文档中第一个<div>元素的类名（如果有）：

  var x = document.getElementsByTagName("DIV")[0].className;
  

  尝试一下

  有关如何获取元素类名的其他示例：

  var x = document.getElementsByClassName("mystyle")[0].className;
  var y = document.getElementById("myDIV").className;
  

  尝试一下

  获取具有多个类的元素的类名：

  <div id="myDIV" class="mystyle test example">I am a DIV element</div>
  
  var x = document.getElementById("myDIV").className;
  

  尝试一下

  用新的类覆盖现有的类名：

  <div id="myDIV" class="mystyle">I am a DIV element</div>
  
  document.getElementById("myDIV").className = "newClassName";
  

  尝试一下

  要向元素添加类而不覆盖现有值，请插入空格和新类名：

  document.getElementById("myDIV").className += " anotherClass";
  

  尝试一下

  如果在id =“myDIV”的元素中有一类“mystyle”，请更改其font-size：

  var x = document.getElementById("myDIV");
  
  if (x.className === "mystyle") { 
    x.style.fontSize = "30px";
  }
  

  尝试一下

  在两个类名之间切换。这个例子在<div>中查找“mystyle”类，如果它存在，它将被“mystyle2”覆盖：

  function myFunction(){
    var x = document.getElementById("myDIV");
    // If "mystyle" exist, overwrite it with "mystyle2"
    if (x.className === "mystyle") {
      x.className = "mystyle2";
    } else {
      x.className = "mystyle";
    }
  }
  

  尝试一下

  在不同滚动位置上的类名之间切换 - 当用户从顶部向下滚动50个像素时，类名“test”将被添加到元素（并在再次向上滚动时被移除）。

  window.onscroll = function() {myFunction()};
  
  
  function myFunction() {
    if (document.body.scrollTop > 50) {
      document.getElementById("myP").className = "test";
    } else {
      document.getElementById("myP").className = "";
    }
  }
  尝试一下
  

• 

  相关页面

  CSS 教程： CSS语法

  CSS 参考： CSS .class选择器

  HTML DOM参考： HTML DOM classList属性

  HTML DOM参考： HTML DOM getElementsByClassName()方法