javascript改變css - javascript更改class




使用JavaScript更改元素的類 (17)

使用IE6支持更改vanilla JavaScript中的元素類

您可以嘗試使用節點attributes屬性來保持與舊瀏覽器的兼容性,甚至IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>

如何使用JavaScript更改響應onClick事件的HTML元素類?


classList DOM API:

添加和刪除類的一種非常方便的方法是classList DOM API。 此API允許我們選擇特定DOM元素的所有類,以便使用javascript修改列表。 例如:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

我們可以在日誌中觀察到我們不僅返回一個對象,而且還包含元素的類,還有許多輔助方法和屬性。 此對象繼承自DOMTokenList接口,該接口在DOM中用於表示一組空格分隔的標記(如類)。

例:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


以前的正則表達式上的一些小註釋和調整:

如果類列表具有多次類名,您將希望全局執行此操作。 而且,您可能希望從類列表的末尾刪除空格並將多個空格轉換為一個空格以防止空格的運行。 如果使用類名稱的唯一代碼使用下面的正則表達式並在添加之前刪除名稱,則這些都不應該成為問題。 但。 好吧,誰知道誰可能會在班級名單上加油。

此正則表達式不區分大小寫,因此在不關心類名稱中的大小寫的瀏覽器上使用代碼之前,類名中的錯誤可能會顯示出來。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

你也可以擴展HTMLElement對象,以便添加添加,刪除,切換和檢查類的方法( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

然後就這樣使用(點擊將添加或刪除類):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

這是demo


使用JavaScript代碼:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

您可以從此鏈接下載工作代碼。


使用純JavaScript代碼:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

只是說myElement.classList="new-class"除非你需要維護其他現有的類,在這種情況下你可以使用classList.add, .remove方法。

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


哇,驚訝於這裡有太多的矯枉過正的答案......

<div class="firstClass" onclick="this.className='secondClass'">

在我沒有使用jQuery的一個舊項目中,我構建了以下函數來添加,刪除和檢查元素是否具有類:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

所以,例如,如果我想onclick添加一些類,我可以使用這個按鈕:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

到目前為止,肯定會更好地使用jQuery。


好吧,我認為在這種情況下你應該使用jQuery或在純javascript中編寫自己的方法,我的偏好是添加我自己的方法,而不是將所有jQuery注入我的應用程序,如果我不需要其他原因。

我想做一些類似下面的方法,我的javascript框架添加一些功能,處理添加類,刪除類等類似於jQuery,這完全支持IE9 +,我的代碼也是用ES6編寫的,所以你需要為了確保你的瀏覽器支持它或你使用像babel這樣的東西,否則需要在你的代碼中使用ES5語法,也就是這樣,我們通過ID找到元素,這意味著元素需要有一個ID來選擇:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

並且您可以簡單地調用如下所示使用它們,想像您的元素具有'id'的id和'class'的類,請確保將它們作為字符串傳遞,您可以使用如下的util:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

我以為我會把它扔進去:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

我在代碼中使用以下vanilla JavaScript函數。 它們使用正則表達式和indexOf但不需要在正則表達式中引用特殊字符。

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

您還可以在現代瀏覽器中使用element.classList


沒有冒犯,但是在動態改變類是不可能的,因為它迫使CSS解釋器重新計算整個網頁的視覺呈現。

原因是CSS解釋器幾乎不可能知道是否可以更改任何繼承或級聯,所以簡短的答案是:

永遠不要動態更改className! - )

但通常你只需要改變一兩個屬性,這很容易實現:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

這對我有用:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

這是一個toggleClass來切換/添加/刪除元素上的類:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

看到jsfiddle

另請參閱我here動態創建新類的答案


這是一個簡單的jQuery代碼。

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

這裡,

  • Class1是事件的監聽器。
  • 父類是承載要更改的類的類
  • Classtoremove是你的老班。
  • 要添加的類是要添加的新類。
  • 100是更改類的超時延遲。

祝好運。


這條線

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

應該:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');




dom