`

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

分享到:
评论

相关推荐

    动态添加style元素

    2. 添加CSS内容:可以通过`innerHTML`属性将CSS规则添加到`&lt;style&gt;`元素中。例如: ```javascript styleElement.innerHTML = ` .myClass { color: red; } `; ``` 或者,如果你的CSS规则是从服务器获取的,...

    HTML教程全集

    `&lt;img&gt;`元素插入图像,`src`属性指定图像源,`alt`属性提供文字描述,以供无法显示图像时使用。 四、HTML列表 HTML提供两种类型的列表:无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)。列表项通过`&lt;li&gt;`元素表示。还可以...

    Web编程技术(html)

    图片标记`&lt;IMG&gt;`用于插入图像,属性如`SRC`指定图像源,`WIDTH`和`HEIGHT`设置尺寸,`BORDER`定义边框宽度。例如: ```html &lt;img src="myimage.jpg" width="200" height="100" border="10"&gt; ``` 超级链接`&lt;A&gt;`用于...

    HTML学习

    2. **标签**:HTML标签是页面内容的骨架,比如`&lt;h1&gt;`到`&lt;h6&gt;`定义了六级标题,`&lt;p&gt;`用于段落,`&lt;a&gt;`用于超链接,`&lt;img&gt;`插入图像,`&lt;div&gt;`和`&lt;span&gt;`用于内容分组和样式应用。还有许多其他标签,如`&lt;ul&gt;`、`&lt;ol&gt;`和`...

    HTML语言教程文本.rar

    图像的插入使用`&lt;img&gt;`标签,`src`属性指向图像文件路径,`alt`属性提供替代文本,当图像无法显示时使用。另外,`&lt;video&gt;`和`&lt;audio&gt;`元素支持多媒体内容的播放。 总之,HTML是构建网页的基础,与CSS和JavaScript...

    HTML基础学习

    `&lt;img&gt;`标签用于插入图像,它的`src`属性指定图片的URL,`alt`属性提供图片无法显示时的替代文本。`&lt;table&gt;`元素用于创建表格,通过`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头)来组织数据。 对于列表,HTML...

    html网页制作教案

    在HTML中,我们可以通过`&lt;img&gt;`标签插入图片,`&lt;a&gt;`标签创建链接,`&lt;h1&gt;`到`&lt;h6&gt;`定义标题等级,`&lt;ul&gt;`和`&lt;ol&gt;`创建无序和有序列表,`&lt;table&gt;`则用于创建表格。此外,`&lt;form&gt;`元素和相关标签(如`&lt;input&gt;`、`&lt;button...

    HTML速查手册电子书

    2. **元素与标签**:HTML由各种标签组成,如`&lt;h1&gt;`至`&lt;h6&gt;`定义六级标题,`&lt;p&gt;`表示段落,`&lt;img&gt;`插入图片,`&lt;a&gt;`创建超链接,`&lt;ul&gt;`和`&lt;ol&gt;`定义无序和有序列表,`&lt;table&gt;`构建表格等。每个标签都有其特定的用途和...

    小米闪购html自行编写.rar

    5. 图片:`&lt;img&gt;`元素插入图片,`src`属性为图片源地址,`alt`提供替代文本,提高可访问性。 6. 列表:`&lt;ul&gt;`和`&lt;ol&gt;`用于无序和有序列表,`&lt;li&gt;`定义列表项。 7. 表单元素:在电商页面中,用户可能会填写订单信息...

    s标签的应用和题目,程序演示

    答案:通过JavaScript,可以访问并修改`&lt;s&gt;`标签的`innerHTML`属性来改变内容,以及`style`属性来调整样式。例如: ``` var deletedItem = document.querySelector('s'); deletedItem.innerHTML = '新内容'; ...

    HTML中文手册

    `&lt;h1&gt;`到`&lt;h6&gt;`定义不同级别的标题,`&lt;p&gt;`用于段落,`&lt;a&gt;`创建超链接,`&lt;img&gt;`插入图像,`&lt;div&gt;`用于分组元素,`&lt;ul&gt;`和`&lt;ol&gt;`创建无序和有序列表,`&lt;li&gt;`定义列表项,等等。这些基本标签构成了HTML文档的基础框架。...

    静态HTML旅行主题网页设计与实现——联途旅游网服务平台网(39页)HTML+CSS+JavaScript

    - **多媒体标签**: `&lt;img&gt;`、`&lt;video&gt;`、`&lt;audio&gt;`,用于插入图片、视频和音频等媒体元素。 - **表单标签**: `&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;button&gt;`等,用于创建交互式的表单。 #### 2. **CSS3** - **选择...

    html css js网页设计.docx

    - `&lt;img&gt;`:用于插入图像。 - `&lt;div&gt;`:定义文档中的分区或节。 - `&lt;span&gt;`:用于定义文档中的小节或短语。 - `&lt;table&gt;`:定义表格。 - `&lt;ul&gt;`、`&lt;ol&gt;`:定义无序或有序列表。 - `&lt;li&gt;`:定义列表项。 **1.3 示例**...

    比较经典的html素材

    在`&lt;body&gt;`中,我们常见到`&lt;h1&gt;`至`&lt;h6&gt;`的标题标签,`&lt;p&gt;`用于段落,`&lt;a&gt;`定义超链接,`&lt;img&gt;`插入图像,`&lt;ul&gt;`和`&lt;ol&gt;`创建无序和有序列表,`&lt;li&gt;`表示列表项,`&lt;div&gt;`用于内容分组,`&lt;table&gt;`构建表格等。...

    HTML基础学习教程

    在HTML中,文本内容通过`&lt;p&gt;`标签表示段落,`&lt;h1&gt;`至`&lt;h6&gt;`用于创建标题,`&lt;a&gt;`用于创建超链接,`&lt;img&gt;`插入图像,`&lt;ul&gt;`和`&lt;li&gt;`创建无序列表,`&lt;ol&gt;`和`&lt;li&gt;`创建有序列表。此外,`&lt;div&gt;`是一个通用容器,可以用于...

    简单的JavaScript table

    首先,HTML中的`&lt;table&gt;`元素是创建表格的基础,包括`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(表格主体)和`&lt;tr&gt;`(表格行)、`&lt;th&gt;`(表头单元格)以及`&lt;td&gt;`(数据单元格)等元素。例如,一个简单的表格结构如下: ```html...

    php课后习题及答案php

    - **知识点**: &lt;img&gt; 标签用于在网页中插入图像,src 属性用来指定图像文件的 URL 地址。 - **选项分析**: - A. &lt;img&gt;image.gif&lt;/img&gt;:语法错误,缺少 src 属性。 - B. &lt;imghref=”image.gif”/&gt;:语法错误,...

    HTML中文完全手册.zip

    对于图像处理,`&lt;img&gt;`标签用于插入图片,src属性指定图片的URL,alt属性提供替代文本,当图片无法显示时供用户理解。链接使用`&lt;a&gt;`标签,href属性定义链接的目标地址。表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`...

    js页面插入html表格

    此外,如果你需要处理更复杂的数据结构,比如动态生成表格行或列,可以使用循环结构来遍历数据数组,为每一项生成对应的`&lt;tr&gt;`或`&lt;td&gt;`元素。同时,你还可以利用JavaScript的事件监听器为表格元素添加交互功能,比如...

    一个动态添加table行的js例子

    接着,我们为新行插入两个单元格,并在每个单元格内创建输入框(`&lt;input type='text'&gt;`),以便用户可以输入数据。 `-1`作为`insertRow`参数表示在表格的最后一行之后插入新行。如果想要在特定位置插入行,可以传入...

Global site tag (gtag.js) - Google Analytics