用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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
详解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/27 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python能自学吗
2020/06/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
高级文秘工作总结的自我评价
2013/09/28 职场文书
一年级语文教学反思
2014/02/13 职场文书
自强之星事迹材料
2014/05/12 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
公司授权委托书范文
2014/09/21 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript