用JavaScript动态建立或增加CSS样式表的实现方法


Posted in Javascript onMay 20, 2016

1、简单的方法,不管不顾,直接这样就可以:

document.createStyleSheet().cssText = '标签{color:red;' +
    // 这个注释只在当前JS中帮助理解,并不会写入CSS中
    'width:300px;height:150px}' +
    '.类名{……}' +
    '#ID们{……}'
;

 //完活。我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候。

2、完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现:

if (!document.styleSheets['要建立的样式表ID如theforever']) { //先检查要建立的样式表ID是否存在,防止重复添加
 var ss = document.createStyleSheet();
 ss.owningElement.id = '要建立的样式表ID如theforever';
 ss.cssText = '标签{display:inline-block;overflow:hidden;' +
  // 这个注释只在当前JS中帮助理解,并不会写入CSS中
  'text-align:left;width:300px;height:150px}' +
  '.类名{……}' +
  '#ID们{……}'
 ;
 }

以上这篇用JavaScript动态建立或增加CSS样式表的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
You might like
PHP漏洞全解(详细介绍)
2012/11/13 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
学习Vue组件实例
2018/04/28 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python3 处理JSON的实例详解
2017/10/29 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
深入了解python中元类的相关知识
2019/08/29 Python
python装饰器使用实例详解
2019/12/14 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
个人简历的自荐信
2013/10/23 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
行政助理求职自荐信
2013/10/26 职场文书
给国外客户的邀请函
2014/01/30 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
小学二年级数学教学计划
2015/01/20 职场文书