Js基礎6：動態設置class

置class的方法：

 // 修改類名 可以同時修改多個
 element.className = "name1 name2 ..."
 
 // 在類名列表里添加類名
 element.classList.add("active");
 // 在類名列表里刪除類名
 element.classList.remove("active");

1、開關思想

開關思想：定義一個變量, 這個變量決定了一個狀態，事件觸發的時候，根據這個變量的值，執行對應的操作，操作完還需要修改這個變量的值。

比如：點擊按鈕，顯示或隱藏div

 // 需要一個變量存儲狀態
 var flag = true;
 get_id("btn").onclick = function () {
     // console.log("點擊事件觸發了");
     // if(flag==true){
     if (flag) {
         // 把div的left值改成-200px
         my$("box").style.left = "-200px";
         // 需要把flag改成false,防止下一次點擊這個flag還是true,如果flag還是true,就會一直走這里的代碼
         flag = false
    } else {
         my$("box").style.left = "0px";
         // 防止下一次點擊flag還是false,就還是會走這里的代碼
         flag = true
    }
 }

開關燈案例：

當點擊"關燈"按鈕時，將body背景顏色設置成黑色，同時將 "關燈" 設置成 "開燈"；
當點擊"開燈"按鈕時，將body背景顏色設置成白色，同時將 "開燈" 設置成 "關燈".

html和css代碼

 <style>
 .cls{
      background-color: black;
 }
 </style>
 <input type="button" value="開/關燈"  id="btn">

JavaScript代碼

頁每個Element元素都有style和classname屬性，可以通過CSS直接設置，也允許腳本指定文檔元素的CSS樣式，或修改應用到元素上的css類名，設置這些css相關的屬性會改變文檔元素的呈現。

1 用JS修改標簽的 class 屬性值：

class 屬性是在標簽上引用樣式表的方法之一，它的值是一個樣式表的選擇符，如果改變了 class 屬性的值，標簽所引用的樣式表也就更換了。

更改一個標簽的 class 屬性的代碼是：

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 用于獲取標簽對應的 DOM 對象，你也可以用其它方法獲取。className 是 DOM 對象的一個屬性，它對應于標簽的 class 屬性。字符串是 class 屬性的新值，它應該是一個已定義的CSS選擇符。

利用這種辦法可以把標簽的CSS樣式表替換成另外一個，也可以讓一個沒有應用CSS樣式的標簽應用指定的樣式。

舉例1，代碼如下：

<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red; }
</style>

<div id="tt">歡迎光臨！</div>
<p><button on click="setClass()">更改樣式</button></p>

<script type="text/javas cript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

舉例2，代碼如下：

<script type="text/javascript">

</script>

2 用JS修改標簽的 style 屬性值：

元素的style屬性可以直接設置元素的外觀屬性。Style 對象的屬性和 CSS 屬性是一一對應的，可以直接設置，也可以通過JS動態更改。

更改一個標簽的 style 屬性的代碼是：

document.getElementById( id ).style.屬性名 = 值;

document.getElementById( id ) 用于獲取標簽對應的 DOM 對象，你也可以用其它方法獲取。style 是 DOM 對象的一個屬性，它本身也是一個對象。屬性名是 Style 對象的屬性名，它和某個CSS屬性是相對應的。

說明：這種方法修改的單一的一個CSS屬性，它不影響標簽上其它CSS屬性值。

舉例，代碼如下:

div id="t2">歡迎光臨！</div>
<p><button on click="setSize()">大小</button>
<button on click="setColor()">顏色</button>
<button on click="setbgColor()">背景</button>
<button on click="setBd()">邊框</button>
</p>

<script type="text/java script">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>

3 綜合實例

function clk(event) {
var parent = document.getElementById("parent");
//改變className
var child0 = document.createElement("div");
child0.innerHTML = "child0";
child0.className = "newDiv";
parent.appendChild(child0);
//改變cssText
var child1 = document.createElement("div");
child1.innerHTML = "child1";
child1.style.cssText = "color:red;";
parent.appendChild(child1);
//改變直接樣式
var child2 = document.createElement("div");
child2.innerHTML = "child2";
child2.style.fontSize = "28px";
parent.appendChild(child2);
}

4 JS設置CSS的語法與CSS語法的區別

盒子標簽和屬性對照
CSS語法（不區分大小寫）	JavaScript語法（區分大小寫）
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
顏色和背景標簽和屬性對照
CSS 語法（不區分大小寫）	JavaScript 語法（區分大小寫）
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color

樣式標簽和屬性對照
CSS語法（不區分大小寫）	JavaScript 語法（區分大小寫）
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
white-space	whiteSpace

文字樣式標簽和屬性對照
CSS 語法（不區分大小寫）	JavaScript 語法（區分大小寫）
font	font
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight

文本標簽和屬性對照
CSS 語法（不區分大小寫）	JavaScript 語法（區分大小寫）
letter-spacing	letterSpacing
line-break	lineBreak
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-justify	textJustify
text-transform	textTransform
vertical-align	verticalAlign

從上表可以看出，兩者的寫法區別在于CSS是不區分大小寫的，所以兩個英文字中間用了一個橫杠"-"，用JS區分大小寫，所以不用橫杠"-"，而用英文的小駝峰式命名法（lower camel case，第一個單字以小寫字母開始，第二個單字的首字母大寫）。

－End－

/**

 * @author zswxjjh

 * @date  2021/3/29

 */
'use  strict';

/*
* 模仿DOMTokenList對象，提供contains（）
* add（），remove（）。toggle（）方法
* 重寫toString方法，為了模擬類數組特性
* 提供toArray方法
*
* */
var  classList=(function () {
  /*
  * e是一個元素，定義一個CSSClassList類模擬
  * DOMTokenList類
  * */
  function classList(e) {
   /* if(e.classList)
      return e.classList;
    else*/
      return new CSSClassList(e);
  }

  /*
  * 定義CSSClassList類
  * */
  function CSSClassList(e) {
     this.e=e;
  }

  /*
  * c是一個合法的類名，判斷是否包含給定的類名
  * 返回boolean
  * */
  CSSClassList.prototype.contains=function (c) {
      //是否合法
    if(!c)
    {
      throw new TypeError('參數不存在!');
    }
    else  if(c.length===0 || c.lastIndexOf(' ')!==-1/*c包含空格*/)
    {
      throw new TypeError('不合法的類名:"'+c+'"!');
    }
    if(!this.e.className)
      return false;
   if(this.e.className===c)
     return true;
   return this.e.className.search('\\b'+c+'\\b')!==-1;
  };

  /*
  * 追加一個類名在尾部
  *
  * */
  CSSClassList.prototype.add=function (c) {
      if(this.contains(c))
        return;
      //判斷值里面是否以空格結尾
      var classes=this.e.className;
       if(!classes)
         this.e.className='';
       if(classes.length!==0 && classes[classes.length-1]!==' ')/*不是以空格結尾*/
       {
          c=' '+c;
       }
       this.e.className+=c;
  };
  /*
  * 移除類名字c
  * */
  CSSClassList.prototype.remove=function (c) {
     if(this.contains(c))
     {
       var pattern=new RegExp('\\b'+c+'\\b\\s*','g');
       this.e.className=this.e.className.replace(pattern,'');
       if(!this.e.className)
       {
         this.e.removeAttribute('class');
       }
     }
  };

  /*
  * 如果c存在，刪除c，返回false
  * 否則，追加c，返回true
  * */
  CSSClassList.prototype.toggle=function (c) {
     if(this.contains(c))
     {
       this.remove(c);
       return false;
     }
     else
     {
       this.add(c);
       return true;
     }
  };

  /*
  * 覆蓋toString方法
  * */
  CSSClassList.prototype.toString=function () {
      return this.e.className;
  };

  /*
  * 提供類數組的功能，轉換成數組
  * */
  CSSClassList.prototype.toArray=function () {
      return this.e.className.match(/\b\w+\b/g) ||[];
  };

  return classList;
})();
/*以上代碼提供對HTML5標簽屬性class的跨瀏覽器操作*/

在線咨詢

上一篇：HTML常用標簽概述（可用于網店裝修）
下一篇：看破冰行動，了解暗網是張什么網？進入并不容易

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。