`

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会应用新样式。

转自:http://www.w3cmm.com/dom/innerhtml-style.html

分享到：
| CSS实现相对浏览器窗口定位彻底研究
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    新浪推荐浮动广告

    charset=gb2312" /&gt;&lt;br&gt;&lt;title&gt;test&lt;/title&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;table height=1000&gt;&lt;br&gt;&lt;tr&gt;&lt;td&gt;dddd&lt;/td&gt;&lt;/tr&gt;&lt;br&gt;&lt;/table&gt;&lt;br&gt;&lt;/body&gt;&lt;br...

    Vue中插入HTML代码的方法

    我们需要吧&lt;p&gt;Hello World&lt;/p&gt;插入到&lt;p&gt;My name is Pjee&lt;/p&gt;应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `&lt;p&gt;Hello World&lt;/&gt;` &lt;p&gt; My name is Pjee &lt;p v-html='text'&gt;&lt;/p&gt; &lt;/p&gt; ...

    用javascript写的windows资源管理器

    &lt;br&gt;这里需要说明的是很少用到了innerHTML和innerTEXT两个方法，这是微软提供的专利方法，还没有得到W3C的认可，&lt;br&gt;在别的浏览器里面这两个方法不一定会被支持。&lt;br&gt;所以很多地方是用了DOM的方式进行处理。&lt;br&gt;&lt;br&gt;...

    html_网页的简介

    &lt;h1&gt;重庆市渝北区龙溪大道&lt;/h1&gt; &lt;p id="d"&gt; JavaScript点击会触发！ &lt;/p&gt; &lt;script&gt; function myfn() { a=document.getElementById("d"); a.innerHTML="Hello Word！"; a.style.color="blue"; } &lt;/script&gt; &lt;button ...

    js时间函数

    &lt;br&gt; if(num==0){&lt;br&gt; &lt;br&gt; }else{&lt;br&gt; &lt;br&gt; }&lt;br&gt; document.getElementById("CurrentDate").innerHTML=Year+str[0][0]+Month+str[0][1]+Day+str[0][2]+" "+Hour+str[0][3]+Minute+str[0][4]+Second+str[0][5]+" "+...

    在线考试系统设计与实现

    计算机专业毕业设计 &lt;%@page pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; ... &lt;td&gt;你好:&lt;/td&gt;&lt;td&gt;${login}老师!欢迎光临网站&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt; &lt;td&gt;&lt;div id="timer"&gt;

    元旦倒计时代码（HTML+css+JavaScript）

    obj.innerHTML="&lt;br&gt;距离2023年还有：&lt;br&gt;"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"&lt;br&gt;&lt;span&gt;再见了，2022年!你好，2023年!&lt;br&gt;只要我们尽力做了，谁都可以成为自己的英雄。&lt;br&gt;Goodbye, 2022! Hello, ...

    ASP.Net电子商务网站后台模板

    &lt;a style="color: #16547E"&gt;身份 ：超级管理员&lt;/a&gt;&nbsp;&nbsp; &lt;a href="javascript:window.location.reload()" target="content3"&gt;隐藏工作台&lt;/a&gt;&nbsp;&nbsp;|&nbsp;&nbsp; &lt;a href="javascript:window....

    04表单事件.html

    box3.innerHTML = "&lt;span&gt;我是span&lt;/span&gt;"; // box3.innerText = "&lt;span&gt;我是span&lt;/span&gt;"; // 获取input里面的值 console.log(ipt.value) //显示jack ipt.value = "汤姆" // 失去焦点时，拿到输入框里面...

    javascript写的windows资源管理器

    &lt;br&gt;这里需要说明的是很少用到了innerHTML和innerTEXT两个方法，这是微软提供的专利方法，还没有得到W3C的认可，&lt;br&gt;在别的浏览器里面这两个方法不一定会被支持。&lt;br&gt;所以很多地方是用了DOM的方式进行处理。&lt;br&gt;首次...

    js获取系统当前时间

    &lt;html&gt; &lt;head&gt; &lt;title&gt;网页特效|Linkweb.cn/Js|...&lt;script&gt;setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

    jQuery详细教程

    $("ul li:first") 每个 &lt;ul&gt; 的第一个 &lt;li&gt; 元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件...

    超强JS(javascript)正则类第三版

    &lt;br&gt; * alert('A:text='+A2.innerText+'A:tag='+A2.innerHTML+'A:string='+A2.string+'='+reg.getElememtBy(str,'href','index.php').string);&lt;br&gt; * var imgtemp=reg.getElememtById(str,'abcd').string;&lt;br&gt; * var...

    鼠标点击展开关闭层效果

    &lt;style type="text/css"&gt; #box,#box2,#box3,#box4{padding:10px;border:1px solid green;} &lt;/style&gt; &lt;script type="text/javascript"&gt; //=点击展开关闭效果= function openShutManager(oSourceObj,oTargetObj,...

    Xpage学习笔记

    第一步：在xpage中插入&lt;div dojoType=”dijit.form.Button” id=”dojoBtn”&gt;&lt;/div&gt; 第二步：在xpage中插入&lt;xp:scriptBlock&gt;&lt;/xp:scriptBlock&gt; 第三步：编写客户端javascript &lt;div dojoType="dijit.form....

    向左不间断（无缝）滚动图片js代码下载

    向左不间断（无缝）滚动图片js代码... &lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt; &lt;/CENTER&gt; &lt;/BODY&gt;&lt;/HTML&gt; ------------------------- Trackback: http://www.aspxhome.com/download/javascript/20078/13049.htm

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    ajax、mysql、jstl实现分页、局部刷新界面

    &lt;td style="width:600"&gt; ${row.introduce}&lt;/td&gt; &lt;td&gt; ${row.blues} &lt;/td&gt; &lt;td&gt; ${row.times }&lt;/td&gt; &lt;c:set var="times" value="${row.times }" scope="session" /&gt; &lt;td&gt; &lt;input type="button" value="展开" ...

    JavaScript Table行定位效果

    &lt;style type="text/css"&gt; .t{width:100px; border-collapse:collapse;} .t td{border:5px solid #999;} &lt;/style&gt; &lt;table class="t"&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;1&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;table class="t" frame=...

    js实现 html 鼠标右键 菜单

    &lt;tr&gt;&lt;td style="cursor:default;border:outset 1;" align="center" onclick="parent.del()"&gt; 删除&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;!-- 右键菜单结束--&gt; &lt;/html&gt; &lt;script language="JavaScript"&gt; function ...

Magicbox
Global site tag (gtag.js) - Google Analytics