javascript在页面head内动态插入style

纯js实现:

        var css = ‘h1 { background: red; }‘,
        head = document.getElementsByTagName(‘head‘)[0],
        style = document.createElement(‘style‘);
        style.type = ‘text/css‘;
        if(style.styleSheet){
        style.styleSheet.cssText = css;
        }else{
        style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);

jquery实现:

        var $style = $(‘<style type="text/css"></style>‘);
        $($(‘head‘)[0]).append($style);
        $style.append(‘.test{background: red;}‘);
时间: 2025-01-02 00:32:32

javascript在页面head内动态插入style的相关文章

JavaScript 动态插入 CSS

写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 1 创建一个 style 对象2 使用 stylesheet 的 insertRule 或 addRule 方法添加样式 一.查看样式表 先看下 document.styleSheets,随意打开一个页面 其中前三个是通过 link 标签引入的 CSS 文件,第四个是通过 style 标签内联在页面里的 CSS.有如下属性 每一个 cssRule 又有如下属性 其中的

Javascript动态创建 style 节点

有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import url(style.css); 动态外部 css 文件加载的方法有如下: 第一种: var style = document.createElement(’link’);style.href = ’style.css’;style.rel = ’stylesheet’;style.type = ‘

jquery动态插入行,不用拼写html,简洁版

这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"> <table id="tblData"> <tr> <td>保证人姓名</td> <td>证件号码</td> <td>工作单位</td> <td>职务</td> &

jquery动态插入行

这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style="padding:20px;" > <div id="optionContainer" class="ftitle">经验实体信息(必填,多个网商店铺需加行)</div> <div id="option0"

JavaScript大杂烩7 - 理解内置集合

JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Array,它们支撑起来JavaScript编程的基石.由于Number与Boolean很简单,这里就不多说了,下面着重介绍其他的内置对象. 万物之源 - Object对象 JavaScript是单根的,唯一的根就是Object对象,这个对象提供了几个还是不错的方法,值得了解一下. 1. hasOwnProperty

使用JavaScript改变页面元素的属性

在使用HTML制作web页面的过程中,很多时候需要动态的去改变控件的属性,这就需要通过调用JavaScript脚本来实现.下面介绍了本人使用过的一些示例代码. JavaScript脚本改变页面控件的HTML属性. 1.语法: document.getElementById(id).attribute=new value 2.说明: id 控件的ID attribute 控件的HTML属性 new value 新的属性值 3.示例代码: <!DOCTYPE html PUBLIC "-//W

#转#VS2012 正则表达式 动态插入 动态替换 (查找和替换工具)

http://www.chinabaike.com/t/9642/2014/0623/2539877.html 在用VS做编码开发时,我们常会用到其自带的"查找和替换"这个工具. 关于用正则替换,有一些容易被遗忘的非常有用的功能.比如,正则动态插入并替换. 通常,如果我们要查找源文件中的固定字符"A",并替换成固定字符"B",那么简单,只需分别在查找框输入"A"和替换框输入"B",然后点查找.替换按钮就可以

JS动态插入内容到DIV

html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(