动态样式是指页面加载过程中样式并不存在,页面加载完成后动态添加到页面的样式。动态样式包括通过<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>