JavaScript innerHTML插入<style>元素-静水博客

JavaScript innerHTML插入<style>元素

2016/03/12 标签： javascript

通过innerHTML写入<style>元素没有得到浏览器很好的支持，IE9、Opear 9、Chrome高版本和Firefox高版本支持以直观的方式通过innerHTML插入<style>元素，例如：

div.innerHTML = "<style type="text/css">body {background-color: red;}</style>";

在IE6和IE7中会忽略这个<style>元素。在IE中，<style>也是一个作用域外元素，因此必须想下面这样给它前置一个作用域元素：

div.innerHTML = "_<style type="text/css">body {background-color: red;}</style>"
div.removeChild(div.firstChild);

低版本的Safari和Chrome则会因为没有将这个<style>元素添加到<head>元素而继续忽略它。如果想在所有浏览器中成功插入<style>元素，就必须想下面这样：

//针对低版本IE
div.innerHTML = "_<style type="text/css">body{background-color: red;}</style>"
div.removeChild(div.firstChild);
//针对低版本Safari和Chrome
document.getElementsByTagName("head")[0].appendChild(div.firstChild);

上一篇: Discuz！前端模板入门指导

下一篇: window.onload或$(document).ready()执行两次或多次解决方案

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章