用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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
原生JS实现微信通讯录
Jun 18 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
文件上传的实现
2006/10/09 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
react build 后打包发布总结
2018/08/24 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
初中体育教学反思
2014/01/14 职场文书
装修五一活动策划案
2014/01/23 职场文书
股指期货心得体会
2014/09/13 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python