javascript插入样式实现代码

javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件，另一种是在页面中使用<style>标签插入页面样式（这里说的不是style属性）。
一、页面中引入外部样式：
在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：


代码如下:

function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用<style>标签插入页面样式。
二、使用<style>标签插入页面样式：
这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；


代码如下:

function includeStyleElement(styles,styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//这里最好给ie设置下面的属性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

这样页面中的元素就能直接应用样式了，不管你的这些元素是不是通过脚本追加的。
关于手贱：
看这段代码：


代码如下:

var divObj = document.createElement("div");
divObj .id = "__div";
divObj .innerHTML="测试js插入DOM和样式";
document.body.appendChild(divObj );
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

前面说了这个项目是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入，我为了尽可能的保证我创建的元素ID唯一性，手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了，IE6，IE7 class和id的命名不能以下划线开头（“_”），竟然把这个给忘了！花了两个小时才找到原因。悲剧啊！得出一个结论！

赞 (0)

相关推荐

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • 使用javascript插入样式

    一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中. 但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决. 还需要注意的就是在有些版本IE中一个页面上sty

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • JavaScript插入动态样式实现代码

    与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式:动态样式是在页面加载完成后动态添加到页面中. 我们以下面这个典型的<link>元素为例: <link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素: 复制代码 代码如下: var link = document.createElement("link&qu

  • ExtJS自定义主题（theme）样式详解

    本文基于Ext JS 4.2.1版本UI组件基础学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件.ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件.工具栏及菜单栏组件.表单及元素组件.其他组件.theme主题ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题. Sass

  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Test</title> <style type="text/css">

  • javascript插入样式实现代码

    javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用<style>标签插入页面样式(这里说的不是style属性). 一.页面中引入外部样式: 在<head>

  • JavaScript访问样式表代码

    JavaScript访问样式表代码

    比如:当我们将鼠标移动到一个图标上的时候,图标会出现一些动画效果(渐变放大.闪动.更换颜色等),而这一切的友好效果基本上都跟样式(style)有关,所以这一篇,我学习JavaScript对style的操作. 技术关键点:style.这一篇要求我们对CSS样式有一定的了解.(读者可以google一下CSS的相关内容) 操作步骤: 1.页面代码(包括JS代码)如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

  • Javascript 访问样式表实现代码

    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: <div id="main" style="background-color:red"></div> 通过js访问style属性 alert(document.getElementById("main").style.backgroundColor); 通过js改变style属性 document.getElemen

  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style

  • JavaScript新增样式规则(推荐)

    关键代码如下所示: <html> <head> <link rel="stylesheet" type="text/css" href="basic.css"> <script> window.onload=function(){ var sheet=document.styleSheets[0]; //[新增样式规则] // sheet.insertRule('.div1{font-size:16

  • JS getStyle获取最终样式函数代码

    复制代码 代码如下: #flower { width:100px; font-size:12px; float:left; opacity:0.5; filter:alpha(opacity=50); } 定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 <div id="flower" >...</div> getStyle函数: 这里用到了三个原型扩展 String.p

  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.

  • javascript 动态样式添加的简单实现

    异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

  • Javascript 动态样式控制方法

    目录 方法一:使用style属性来设置 方法二:定义好类选择器的样式 方法一:使用style属性来设置 使用style属性来设置 html代码:     <div id="div1">         div     </div> Javascript代码: var div1 = document.getElementById("div1");         div1.onclick = function () {            

随机推荐