用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 select控制插件
Aug 17 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
JavaScript类型相关的常用操作总结
Feb 14 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
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
PyMongo安装使用笔记
2015/04/27 Python
python中assert用法实例分析
2015/04/30 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
判断网页编码的方法python版
2016/08/12 Python
对Python 语音识别框架详解
2018/12/24 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
一套PHP的笔试题
2013/05/31 面试题
环境工程专业个人求职信
2013/12/05 职场文书
个人作风剖析材料
2014/02/02 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python