用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的星级评分插件
Aug 12 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
关于JS解构的5种有趣用法
Sep 05 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
护士自我鉴定总结
2014/03/24 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
优秀校长事迹材料
2014/12/24 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
Python中else的三种使用场景
2021/06/16 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers