用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代码
Mar 27 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
关于js类的定义
Jun 28 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
Vue实现手机计算器
Aug 17 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自动适应范围的分页代码
2008/08/05 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php实现微信支付之退款功能
2018/05/30 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
brook javascript框架介绍
2011/10/10 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
如何编写jquery插件
2017/03/29 jQuery
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 变量初始化空列表的例子
2019/11/28 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
正风肃纪查摆剖析材料
2014/10/10 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技