原生JS給DOM元素增加修改和刪除class

之前一直使用jq，處理頁面結構變化都很方便，不過在某些不實用jq的專案裡，還是必須得知道如何使用原生js去處理頁面中簡單的一些樣式變化。這裡介紹js針對css方面的一些基本操作。

hhh

change

//方法1  如果你的頁面裡有很多個「temp」類的話  感覺這種不太適合 「classarr 」取出的是類陣列

let classarr = document.getelementsbyclassname("temp");
classarr[0].classlist.add("red");
//方法2 通過id獲取
let classatr = document.getelementbyid("temp").getattribute("class");
let newclass = classatr.concat(" red"); //注意這裡有空格喲
document.getelementbyid("temp").setattribute("class",newclass);

let classatr = document.getelementbyid("temp").getattribute("class");

let newclass = classatr.replace("temp","red");
document.getelementbyid("temp").setattribute("class",newclass);

//方法1  如果你的頁面裡有很多個「temp」類的話  感覺這種不太適合 「classarr 」取出的是類陣列

let classarr = document.getelementsbyclassname("temp");
classarr[0].classlist.remove("red");
//方法2 通過id獲取
let classatr = document.getelementbyid("temp").getattribute("class");
let newclass = classatr.replace("temp","");
document.getelementbyid("temp").setattribute("class",newclass);

原生JS獲取dom元素高度

clientheight,scrollwidth,offsetwidth的區別 用body 測試 網頁實際寬 document.body.clientwidth 網頁實際高 document.body.clientheight 網頁實際寬 document.body.offsetwidth 包括邊線...

給easyui input元素新增js原生方法

當前專案中一直使用easyui框架,現在產品要求將某個easyui textbox中只能輸入數字,又因為easyui numberbox的字首0的個數不能做成無限個,所以只能在easyui textbox的基礎上進行修改了。easyui的input的元素是在html原生的input元素上進行的一次封...

原生JS獲取DOM元素的方法

js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...