js改变某个对象的css类名,改变某个对象的CSS样式时，不要使用JS直接添加样式，...

重绘：

使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍，导致性能降低

回流：

只要改变某个DOM对象的宽或者高，浏览器就会重新再计算网页结构，重新生成一次，导致性能严重降低。

CSS样式的性能比JS性能更高，所以能使用CSS的就不要使用JS控制。

修改样式有三种方式：

1，直接在CSS中修改样式，比如hover:

.dropdown-active 是父元素

.dropdown-active,

.dropdown-active:hover {

background: #fff;

}

.dropdown-active .dropdown-toggle,

.dropdown-active:hover .dropdown-toggle {

border-left: 1px solid #cdd0d4;

border-right: 1px solid #cdd0d4;

}

.dropdown-active .dropdown-layer,

.dropdown-active:hover .dropdown-layer {

display: block;

}

2，使用JS添加一个类名  .dropdown-active

$('.dropdown').hover(function() {

$(this).addClass('dropdown-active');

}, function() {

$(this).removeClass('dropdown-active');

});

3，性能最差，而且还复杂的一种，直接在JS中控制样式：

$('.dropdown').hover(function() {

var $this = $(this);

$this.css({

background: '#fff'

});

$this.find('.dropdown-toggle').css({

background:'#fff',

'border-left':'1px solid #cdd0d4',

'border-right':'1px solid #cdd0d4'

})

$this.find('.dropdown-layer').css({

display:'block'

})

$this.find('.dropdown-item').hover(function(){

$(this).css({

'background':'#f3f5f7',

color:'#4d555d'

});

},function(){

$(this).css('background','#fff');

})

}, function() {

var $this = $(this);

$this.css({

background: '#f3f5f7'

});

$this.find('.dropdown-toggle').css({

background:'#f3f5f7',

'border-left':'1px solid #f3f5f7',

'border-right':'1px solid #f3f5f7'

})

$this.find('.dropdown-layer').css({

display:'none'

})