用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 04 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
JS打印组合功能
Aug 04 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python 输出所有大小写字母的方法
2019/01/02 Python
pandas 时间格式转换的实现
2019/07/06 Python
使用django实现一个代码发布系统
2019/07/18 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python实现弹球小游戏
2020/08/01 Python
教师先进事迹材料
2014/12/16 职场文书
新年祝酒词大全
2015/08/11 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python