innerHTML插入<style>元素

最新推荐文章于 2025-06-05 19:50:36 发布

SailingLee

最新推荐文章于 2025-06-05 19:50:36 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML & JS & DOM & CSS

本文链接：https://blog.youkuaiyun.com/SailingLee/article/details/84649893

HTML & JS & DOM & CSS 专栏收录该内容

87 篇文章

订阅专栏

本文探讨了使用innerHTML插入<style>元素在不同浏览器中的兼容性问题，并提供了适用于IE6及更高版本、Safari低版本及Chrome低版本的有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SailingLee

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

21-HTML DOM-innerHTML和控制元素样式

记录java学习日常~

05-18

1234

HTML DOM（Document Object Model，文档对象模型）是指将 HTML 文档中的每个元素都作为一个对象来对待，并以树形结构来表示这些对象之间的关系。通过 HTML DOM，可以使用 JavaScript 来操作 HTML 页面中的任何元素。HTML DOM 的根节点是 document 对象，它代表了整个文档。一个 HTML 文档中的其他所有元素都可以作为文档对象的子节点进行访问和操作。

JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素

Tinywan

09-30

439

 一、使用事件委托一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit

参与评论您还未登录，请先登录后发表或查看评论

style操作 / cssText / innerHtml / tagName / harf / src

kino2046的博客

09-01

460

JS中两种操作属性的方法 1 点 . （代表“的”）元素.属性 box.onclick = function(){ box.style.width='300px' }； 2 方括号[ ] 元素['属性'] 比较好，可修改 box['onclick'] = fu...

内部样式：深入解析与应用指南

最新发布

weixin_51288065的博客

06-05

680

掌握内部样式的正确使用方法，能够帮助你在项目开发中灵活选择最适合的样式组织方案，平衡性能、维护性和开发效率的需求。

innerHTML找样式

yangQin2008的专栏

04-07

872

找了好几天的问题,今天终于解决了,原来在innerHTML是要解析类style 的方法如以下代码所示: .FixedTitleColumn { position: relative; left: expression(this.parentElement.offsetParent.scrollLeft); border-right:1px solid #999; border-b

html中.inner样式,关于通过innerHTML插入样式的问题

weixin_39834745的博客

06-11

1219

在js代码中，通过innerHTML加入一段页面，代码如下：运行后，发现在ie下，页面style中的样式没有被解析，页面展现不对，而在ff下展现正常。请教了高手，再阅读 http://www.gold98.net/article.asp?id=897，发现原来在使用innerHTML或insertAdjacentHTML的时候，如果插入的html代码的开头有noscope元素(包括script,...

现在有几个<tr>标签，如下 <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> 怎么给其中一个<tr>加上style属性

05-29

如果需要动态生成样式规则并应用到所有匹配的 `<tr>` 元素上，可以通过 JavaScript 创建并插入一个 `<style>` 标签。例如： ```html <style> .dynamic-style { background-color: yellow; color: black; } </...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript的简单应用</title> <style type="text/css"> *{margin:4px} h4{color:red} img{ width:100px; height:100px } </style> </head> <body> <h3>JavaScript的简单应用</h3><hr /> <h4>1.文档输出</h4> <script> document.write("<p>这里的文本由JS输出！</p>"); </script> <h4>2.更改HTML元素</h4> <p id="js03"> </p> <script> document.getElementById("js03").innerHTML="这里的文本由 JS添加"; </script> <h4>3.响应事件</h4> <button type="button" onclick="alert('温馨提示')">点击</button> <h4>4.改变 HTML样式</h4> <script> x=document.getElementById("js03"); x.style.color="#ff00ff"; </script> <h4>5.改变 HTML图像</h4> <p>点击灯泡来点亮或熄灭这盏灯</p> <script> function changeImage() { element = document.getElementById('myimage') if (element.src.match("bulbon")) { element.src = "image/bulboff.gif"; } else { element.src = "image/bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="image/bulboff.gif"> <h4>6.验证输入</h4> <p>请输入数字</p> <input id="js06" type="text"> <script> function myFunction() { var x = document.getElementById("js06").value; if (x == "" || isNaN(x)) { alert("您输入的不是数字！"); } } </script> <button type="button" onclick="myFunction()">确定</button> </body> </html>

03-21

上述代码片段实现了当用户单击指定 ID 的按钮时，在段落标签 `<p>` 内部插入一段文字的功能。 #### 4. AJAX 请求 Asynchronous JavaScript And XML(AJAX)，它是一种用于异步加载服务器端资源的技术，能够提升用户...

<html> </body> <ul id="list"> <li>append</li> <li>banana</li> <li>peach</li> <li>lemon</li> <li>pear</li> </ul> <button onclick="append()">向列表中添加项目。</button> <p id="p1"></p> <script> function append(){ var node=document.createElement("li"); node.innerHTML="orange"; node.style.color="#f00"; var list=document.getElementById("list"); list.insertBefore(node,list.childNodes[2]); } </script> </body> </html>修改这段代码使它能够运行

06-08

<title>添加列表项</title> </head> <body> <ul id="list"> <li>append</li> <li>banana</li> <li>peach</li> <li>lemon</li> <li>pear</li> </ul> <button onclick="append()">向列表中添加项目</...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <style> /* 简单的样式美化 */ body { font-family: Arial, sans-serif; } form { margin-bottom: 20px; } table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid black; } </style> </head> <body> <h2>留言板</h2> <form id="messageForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br> <label for="message">留言内容：</label> <textarea id="message" name="message" required></textarea><br> <input type="submit" value="提交留言"> </form> <div id="messageList">  </div> <div id="pagination"> <button id="prevPage">上一页</button> <button id="nextPage">下一页</button> </div> <script> document.get

04-23

<style> .message-container { max-width: 800px; margin: 20px auto; padding: 20px; } .message-item { border-bottom: 1px solid #eee; padding: 15px; margin-bottom: 10px; } .pagination { ...

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 利用外部函数实现计算∑N! </title> <script type="text/javascript" src="sum_factorial.js"></script> <style type="text/css"> table { background: #F2F2F2; width: 600px; height: 300px; margin: 20px auto; border: 20px ridge #9999cc; } td { font-size: 20px; font-weight: bold; text-align: center; } #button { width: 180px; height: 60px; } </style> </head> <body>  <form method="post" action=""> <table> <tr> <td colspan=4>计算∑N！</td> </tr> <tr> <td> </td> <td>输入整数N的值：</td> <td><input type="text" name="" id="n_text"></td> <td> </td> </tr> <tr> <td> </td> <td>∑N！=</td> <td><input type="text" name="" id="sum_text" readonly></td> <td> </td> </tr> <tr> <td colspan="4"> <input id="button" type="button" value="计算∑N！" onclick="show();"> <input id="button" type="reset" value=" 清空 "> </td> </tr> </table> </form> </body> </html>

03-14

<button onclick="calculateSum()">计算</button> <div id="result"></div>  <script src="factorial-sum.js"></script> </body> </html> ``` 2. **创建外部JS文件（factorial-sum.js...

js通过innerHTML添加元素点击事件

可达鸭的博客

05-10

882

js往元素里动态添加一个按钮，并激活点击事件innerHTML

innerHTML 是什么用法

m0_57236802的博客

08-14

1709

innerHTML属性用于获取或设置HTML元素的内部HTML内容。你可以通过这个属性来插入新的HTML内容或获取现有内容。

用innerHTML创建元素

双木荼的博客

05-11

4385

用.innerHTML偷懒创建元素

跨浏览器的设置 innerHTML 方法允许插入的 HTML 代码中包含 script 和 style

寂寞の面包专栏

03-16

538

/* * 描述：跨浏览器的设置 innerHTML 方法 * 允许插入的 HTML 代码中包含 script 和 style * 作者：kenxu <ken@ajaxwing.com> * 日期：2006-03-23 * 参数： * el: 合法的 DOM 树中的节点 * htmlCode: 合法的 HTML 代码 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+ */var setInnerHTML = functio

js 创建 style 标签并插入到页面

汤一飞

07-22

459

【代码】js 创建 style 标签并插入到页面。

HTML的DOM的innerHTML用法，简化动态表格，控制样式css

zhansan的博客

07-12

1579

" >删除\n"var text_a = document.createTextNode("删除");3. 创建td，设置td的文本为文本框的内容。5. 将td添加到tr中。//3.创建td，赋值td的标签体。//gender 的 td。//2.获取文本框的内容。//5.添加td到tr中。//name 的 td。//6.获取table。

webpack4——CSS作为style插入到标签上

不想休假的小美美

03-28

1351

1、把css插入到页面的style属性上，但是不会展示出来（css-loader）安装 style-loader css-loader npm -d install style-loader npm -d install css-loader 2、配置module module: { rules: [{ test: /\.css$/, use: [{ ...

运用innerHTML的插入样式

web开发自学

09-16

822

把一段包含<style>的html插入到一个dom里面结果发现 IE对这里的顺序要严格要求。必须先插入html内容然后再插入<style>样式才生效例如 <DIVID="test"></DIV> <SCRIPTLANGUAGE="JavaScript"> document.getElementById("test&qu