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会应用新样式。
相关推荐
WebVincent 2019-11-17
MrWhite0 2015-03-17
srchange 2016-04-26
htmlman0 2019-04-03
DolphinThinker 2019-06-29
kbkiss 2019-06-29
zwq 2016-04-26
WCschool官方 2015-07-20
lzn 2015-06-10
XaverSun 2015-03-17
sunnylinner 2014-12-19
yaoliuwei 2014-09-25
来老师 2014-08-10
zhangpeng 2014-05-04
XaverSun 2013-11-15
careyourself 2013-11-15
maozhuofan 2019-06-18
tianqi 2013-07-23