用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 Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
this.$toast() 了解一下?
Apr 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
php 上传功能实例代码
2010/04/13 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
js编写选项卡效果
2017/05/23 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python的变量与赋值详细分析
2017/11/08 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
8种常用的Python工具
2020/08/05 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
企业治理工作自我评价
2013/09/26 职场文书
便利店投资创业计划书
2014/02/08 职场文书
策划总监岗位职责
2014/02/16 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js