JS之DOM篇-动态样式

动态样式是指页面加载过程中样式并不存在，页面加载完成后动态添加到页面的样式。动态样式包括通过<link>插入的外部样式表和通过<style>插入的内部样式两种

外部样式

<div class="box">测试文字</div>
<button id="btn">动态添加样式</button>
<script>
function loadStyles(url){
  loadStyles.mark = 'load';
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  var head = document.head;
  head.appendChild(link); 
}
btn.onclick = function(){
  if(loadStyles.mark != 'load'){
    loadStyles('./style.css');        
  }
}
</script>

内部样式

<div class="box">测试文字</div>
<button id="btn">动态添加样式</button>
<script>
function loadStyles(str){
  loadStyles.mark = 'load';
  var style = document.createElement('style');
  style.innerHTML = str;
  var head = document.head;
  head.appendChild(style); 
}
btn.onclick = function(){
  if(loadStyles.mark != 'load'){
    loadStyles('.box{height:100px;width:100px;background-color: pink;}');     
  }
}
</script>