var box = document.getElementById("box");

box.id = "pox";

將id = “box”，改為id = “pox”；

但id = “box”依然存在，這樣就不符合W3C標準。不建議使用。

box.className = "box5"; 將會把原來的className 清除只有一個類名為box5的類。

如果想有用className避免這種缺陷，可以寫成 box.className ="box5 box6 ....",但是這種方法太過麻煩，會造成冗余，因此可以用下面的方法：

原生的js中并沒有添加/刪除類這些屬性或方法，為了實現這一功能，因此寫出了一下兩個函數：

1.js原生的addClass()

首先判斷是否有要添加的類名:

function hasClass(element, cName){

return !!element.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));

}

判斷后，如果沒有則添加

function addClass(element, cName){

if (!hasClass(element, cName)) {

return element.className += " " + cName;

};

}

addClass(box,"box6");

addClass(box,"box7");

此時的addClass()添加的類并不會覆蓋掉原來的類，減少了冗余。

2.從多個類中刪除一個元素 removeClass,其余類保留：

function removeClass(element,cName){

if (hasClass(element,cName)) {

element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), " ");

};

}

removeClass(box,"box6"); //test,box,box7

JS:操作樣式表3：內聯和外鏈樣式

var box = document.getElementById("box"); box.style.屬性;只能讀取修改行內樣式. //訪問元素樣式2,對外鏈樣式表進行操作 do ...

JS:操作樣式表1：行內樣式

//訪問元素樣式1, stye屬性只對行內樣式有用 var box = document.getElementById("box"); // alert(box.style.col ...

[薦]使用Js操作注冊表

使用Js操作注冊表 要操作注冊表需要通過ActiveX控件調用WScript.shell對象,通過該對象的一些方法來操作. WshShell對象:可以在本地運行程序.操縱注冊表內容.創建快捷方式或訪問 ...

JS 操作樣式 style

1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都對應著有一個 style 屬性,指向一個 CSSStyleDeclaration 的一個實例對象,包含該元素的內嵌sty ...

Javascript高級編程學習筆記(51)—— DOM2和DOM3(3)操作樣式表

操作樣式表 在JS中樣式表用一種類型來表示,以便我們在JS對其進行操作 這一類型就是CSSStyleSheet 即CSS樣式表類型,包括了之前 style 對象所不包括的外部樣式表以及嵌入樣式表 其中 ...

DOM操作樣式表及其兼容性

DOM操作樣式表的時候,存在很多瀏覽器兼容上的問題,測試的時候用的是Firefox 28.0.IE11.IE8.Chrome.測試的時候發現,不兼容問題基本上都是IE8和非IE瀏覽器之家的問題,很多I ...

JavaScript編程：使用DOM操作樣式表

6.使用DOM操作樣式表: 操縱元素的Style樣式屬性: ? ? ? ? background-color:style.backgroundColor ? ? ? ? color:style.col ...

js進階 9-11 select選項框如何動態添加和刪除元素

js進階 9-11 select選項框如何動態添加和刪除元素 一.總結 一句話總結: 二.js進階 9-11 select選項框如何動態添加和刪除元素 1.案例說明 2.相關知識 Select 下拉列 ...

js修改樣式表規則

adasfsfs adasfsfs adasfs ...

隨機推薦

Android中的requestWindowFeature

朋友推薦使用博客記錄工作中的難點以及常犯的錯誤,僅作為筆記,首先整理之前的工作日志. requestWindowFeature(featrueId),它的功能是啟用窗體的擴展特性: 注意:該方法必須放 ...

Oracle循環語句

PL/SQL有四種類型的循環:簡單循環.WHILE循環.FOR循環以及游標FOR循環.在這里我們主要討論前三種,除此之外,還將討論Oracle 11g中新引入的CONTINUE語句. 一. 簡單循環 ...

SQL Server 2014新特性——基數評估(白皮書閱讀筆記)

基數評估 目錄 基數評估 說明 基數評估準確的重要性 模型假設 啟用新的基數評估 驗證基數評估的版本 在遷移到新的基數評估前要測試 校驗基數評估 偏差問題 需要手動處理的變化 避免因為新的CE造成性能 ...

Ubuntu下postgresql安裝

第一步:在Ubuntu下安裝Postgresql ??????? 1.使用 apt-get install 安裝 ???????? zhang@ubuntu:~/protgresql#sudo apt ...

Entity Framework走馬觀花之把握全局

在深入學習某項技術之前,應該努力形成對此技術的總體印象,并了解其基本原理,本文的目的就在于此. 一.理解EF數據模型 EF本質上是一個ORM框架,它需要把對象映射到底層數據庫中的表,為此,它使用了三個 ...

vue和mvvm的一些小區別

Vue.js 和 MVVM 小細節 ? MVVM 是Model-View-ViewModel 的縮寫,它是一種基于前端開發的架構模式,其核心是提供對View 和 ViewModel 的雙向數據綁定,這 ...

MySql的簡單數據類型區別與認識

date ?? ?3字節,日期,格式:2014-09-18time ?? ?3字節,時間,格式:08:42:30datetime ?? ?8字節,日期時間,格式:2014-09-18 08:42:30 ...

BZOJ1991 : Pku2422 The Wolves and the Sheep

將每個不是障礙的格子標號,設三只狼的位置分別為$A,B,C$,羊的位置在$D$.合法狀態中強行限制$A

docker cmd list

436 wget -qO- https://get.docker.com/ | sh 437 sudo apt-get update 438 sudo apt-get install -y docke ...

Android直連SQL Server數據庫

1. 下載jtds,一個開放源代碼的Java實現的JDBC驅動,地址:http://sourceforge.net/projects/jtds/ 2. 添加jtds到當前Android項目中,本人使用 ...

總結

以上是生活随笔為你收集整理的html中js添加或删除activex,JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。