用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 相关文章推荐
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
JsRender for object语法简介
Oct 31 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
AngularJS自动表单验证
Feb 01 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
高中政治教学反思
2014/01/18 职场文书
暑期研修感言
2014/02/17 职场文书
会计学毕业生求职信
2014/06/25 职场文书
先进单位事迹材料
2014/12/25 职场文书
重阳节简报
2015/07/20 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Linux中如何安装并部署Redis
2022/04/18 Servers