用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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 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
php实现图片上传并进行替换操作
2016/03/15 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python django中8000端口被占用的解决
2019/12/17 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
python使用建议与技巧分享(一)
2020/08/17 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
运动会加油稿100字
2014/09/19 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
通报表扬范文
2015/01/17 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
基于Python实现对比Exce的工具
2022/04/07 Python