用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 相关文章推荐
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python如何保证输入键入数字的方法
2019/08/23 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python hashlib模块的使用示例
2020/10/09 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
医大实习自我鉴定
2013/12/07 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
财政局个人总结
2015/03/04 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
检察院起诉意见书
2015/05/20 职场文书
任长霞观后感
2015/06/16 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS