<html>

　　<head>

　　<link rel="stylesheet" type="text/css" href="basic.css">

　　　　<script>

　　　　　　window.onload=function(){

　　　　　　　　　　　var sheet=document.styleSheets[0];

　　　　　　　　　　　//【新增样式规则】

　　　　　　　　　　//　sheet.insertRule('.div1{font-size:16px;color:red;}',0);　　　　  IE8及以上不支持　　//第一个参数是样式，第二个是样式的位置

　　　　　　　　　   //　sheet.addRule('.div1','font-size:20px;color:orange;font-weight:bold;',0);　　　　//IE都支持　　　　//第一个参数是样式名，第二个样式位置是样式规则，第三个是样式位置

　　　　　　　　　　　function insertCss(element,csName,position){　　　　　　　　　　　　　　　　　　　　　　　　//跨浏览器兼容　　　　　　

　　　　　　　　　　　　　if(sheet.insertRule){　　　　　　　　　　　　　　　　　　　　    // sheet.insertRule  非IE的时候会读取到一个函数，IE8即以上的时候会读取到undefined

　　　　　　　　　　　　sheet.insertRule(element+'{'+csName+'}',position);　　　　

　　　　　　　　　　}else if(sheet.addRule){　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　sheet.addRule(element,csName,position);

　　　　　　　　　　}

　　　　}

　　　　　　　　insertCss('.div1','font-size:16px;color:orange',0);

　　　　　　　　　//【删除样式规则】

　　　　　　　　//sheet.deleteRule(position)  ;  //删除样式  参数为位置　　　　　　　　//IE8及以上不支持

　　　　　　　　//sheet.removeRule(position) ; //删除样式  参数为位置　　　　　　　　//IE支持

　　　　　　　　function deleteCss(position){　　　　　　　　//跨浏览器兼容

　　　　　　　　if(sheet.deleteRule){　　　　　　　　

　　　　　　　　　　　sheet.deleteRule(position);

　　　　　　}else if(sheet.removeRule){

　　　　　　　　　　sheet.removeRule(position);

　　　　　　}　　

　　　　deleteCss(0);

　　　　}

　　　　　　　　

}

　　　　</script>

　　</head>

　　<body></body>

</html>

javaScript增加样式规则(新增样式)的更多相关文章

  1. css样式规则的简要总结

    css与文档关联起来发挥作用. css文件中是各种样式规则,由选择器和声名块构成.声明块由多条声明组成.选择器是声明要作用的对象,声明是对具体规则的描述. 声明由属性和值组成,值或是属性的错误都会使该 ...

  2. iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

    目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...

  3. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  4. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  5. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  6. js | javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  7. css样式规则

    在css样式规则中: 1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式. 2.属性和属性值以"键值对"的形式出现. 3.属性是对指定的对象设置的样式 ...

  8. 2.1.4- css 样式规则

    CSS初识 CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽 ...

  9. JavaScript 学习—— js获取行间样式和非行间样式

    1. 问题引入 <head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; ...

随机推荐

  1. C++中的类指针

    代码: #include <iostream> #include <string> #include <cstdio> using namespace std; c ...

  2. android与PC互传文件 adb push

    1- df 命令查看文件系统的磁盘空间占用情况 shell@android:/ # adb shell df 2- 找到data文件夹, 上传 adb push /data/Sogou  Input_ ...

  3. Android再学习-20141018-布局-进度条

    20141018-Android再学习 对齐至控件的基准线 为了保证印刷字母的整齐而划定的线(四线三格的第三条线). android:layout_alignBaseline 与父控件的四个边缘对齐( ...

  4. css 完美替换图片

    1.css替换简单图标的展示方法 ;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid t ...

  5. [Google Code Jam (Qualification Round 2014) ] A. Magic Trick

    Problem A. Magic Trick Small input6 points You have solved this input set.   Note: To advance to the ...

  6. 开心菜鸟系列学习笔记－－－－－－－－初探Nodejs（了解篇）

    一Node.js开始学习了!    1) 输出hellow worlds   a.建一个js文件 hello.js 写 console.info('hellow world !!!');    进入终 ...

  7. cf A. Jeff and Digits

    http://codeforces.com/contest/352/problem/A #include <cstdio> #include <cstring> #includ ...

  8. Android自定义日历，可以点击、标注日期、节气、旧历等

    1. [图片] 9A59974C-47D4-47E3-8136-3F873EB9BBDC.jpg 2. [图片] left_arrow_pre.png 3. [图片] left_arrow.png 4 ...

  9. Android 中的接口回调

    http://blog.csdn.net/wangjinyu501/article/details/22052187   在Android中到处可见接口回调机制,尤其是UI事件处理方面.举一个最常见的 ...

  10. 关于Yeoman使用的总结

    Yeoman由三部分组成 Yo 用于项目构建. Grunt 用于项目管理,任务制定. Bower 用于项目依赖管理. 经过一段时间的使用,对这些东西有了一些个人总结: 总体上说这些内容学习曲线略高,不 ...