用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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
做网页的一些技巧
Feb 01 Javascript
JavaScript this 深入理解
Jul 30 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js子页面获取父页面数据示例
May 15 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
浅析python中while循环和for循环
2019/11/19 Python
python内打印变量之%和f的实例
2020/02/19 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
前台接待岗位职责
2013/12/03 职场文书
教师申诉制度
2014/01/29 职场文书
人事专员的岗位职责
2014/03/01 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
干部鉴定材料
2014/05/18 职场文书
云冈石窟导游词
2015/02/04 职场文书
入党个人总结范文
2015/03/02 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android