[1]外部样式
[2]内部样式
前面的话
很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂
所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式
动态样式包括两种情况:一种是通过元素插入外部样式表,另一种是通过';
于是,可以通过增加一个'_'文本节点,然后再删除使之有效
div.innerHTML = "_";
div.removeChild(div.firstChild);
function loadStyles(str){
loadStyles.mark = 'load';
var div = document.createElement("div");
div.innerHTML = '_' + '';
div.removeChild(div.firstChild);
var head = document.getElementsByTagName('head')[0];
head.appendChild(div.firstChild);
div = null;
}
btn.onclick = function(){
if(loadStyles.mark != 'load'){
loadStyles(".box{height:100px;width:100px;background-color: pink;}");
}
}
推荐文章
发表评论