innerHTML插入style元素 – 学习画板

首页 » DOM » innerHTML插入style元素

innerHTML插入style元素

通过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);

在新创建的<style>元素添加到<head>后,低版本的Safari和Chrome会应用新样式。

此文章发表在 DOM. 将 固定链接 加入收藏.