改变某个对象的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' })