动态样式CSS

<link>标签可以把外部css样式引入HTML页面

<style>元素用于指定嵌入的样式

通过修改link的href属性，改变引入的css样式

function loadStyle(url){
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = url;
            var head = document.getElementsByTagName('head')[0];
            head.appendChild(link);
        }

 

修改内部css样式通过修改style内部元素完成

<script>
        function loadStyleString(css){
            var style = document.createElement('style');
            var head = document.getElementsByTagName('head')[0];
            style.type = 'text/css';
            try
            {
                style.appendChild(document.createTextNode(css));//兼容标准浏览器
            }
            catch (ex)
            {
                style.styleSheet.cssText = css;//兼容IE
            }
            head.appendChild(style);
        }
    </script>

 cssText容易是浏览器崩溃