如何监听页面元素样式的变化

出发点

如何做到自适应echarts，开发两年的我一直以为，自适应只有在屏幕大小发生变化时才需要做自适应，然而最近的项目中发现，对于左侧菜单栏可以展开收缩或者拖拽改变宽度时，window screen的width并没有发生变化，自然，右侧内容区域的echarts实例也没有发生变化。

如何做到自适应

css新特性 MutationObserver

var callback = function(mutations) {
		mutations.map(function(mutation) {
			switch(mutation.type){
				case 'attributes':
					var chartDiv= echarts.getInstanceByDom(document.getElementById("chartDiv"));//获取实例
					chartDiv.resize(); 
					break;
			}
		});
	}; 
	var obj = document.getElementById('main-header'); 
	var obser = new MutationObserver(callback);

	var options = {
		attributes: true, // 该属性可以监听css的变化
		attributefilter: ['class']
	};

	obser.observe(obj, options);

总结

总而言之，使用css的新特性MutationObserver即可。