用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的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js定时器实例分享
Dec 20 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 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操作数组相关函数
2011/02/03 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现ID3决策树算法
2018/08/29 Python
python实现堆排序的实例讲解
2020/02/21 Python
python如何代码集体右移
2020/07/20 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
使用索引有什么好处
2016/07/27 面试题
拓展培训心得体会
2014/01/04 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
创业融资计划书
2014/04/25 职场文书
大学新闻系自荐书
2014/05/31 职场文书
理财计划书
2014/08/14 职场文书
大一新生期末自我评价
2014/09/12 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang