Question

我想更改分配给链接onclick的css，假设我有3个样式

<a href='#' id='but' class='style1'>link</a>

style1{color:red;}
style2{color:blue;}
style3{color:green;}

如果当前样式是style1更改为style2;如果current是style2改为style3;如果current是style3改为style1;并在那个循环中工作。

这可能吗？

Answer 1

是，

var element = document.getElementById('but');
if(hasClass(element, 'style1')) {
   element.className = 'style2';
} else if(hasClass(element, 'style2')){
   element.className = 'style3';
} else if(hasClass(element, 'style3')){
   element.className = 'style1';
}
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

把它放在一个函数中，你很高兴。

Answer 2

你可以这样做：

var a = document.getElementById('but');
var styles = ["style1","style2","style3"];
var i = 0;              
a.onclick = function(){
  i = (i+1)%3;
  this.className = styles[i];
};

Working fiddle

将css更改为链接onclick，三种不同的样式

2 个答案: