<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. 简单的批量读取外部insert文并插入DB

    package com.tongxiang.item.base.dao; import java.io.BufferedReader; import java.io.File; import java ...

  2. C#按钮打开浏览器,网址

    1.加入 using System.Diagnostics; 2. private void button_main_baidu_Click(object sender, EventArgs e) { ...

  3. mysql 日期时间运算函数（转）

      DAYOFWEEK(date) 返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03'); ...

  4. Front end workflow

    标签:请叫我红领巾 记一哈记一哈 ^_^ 推荐个不错的群 自己刚开始折腾的时候也是无处下手,渺茫啊.然而我是有一个很好的前端群(真的很棒,欢迎加入:[375042952]),关注群里的每一次讨论,每一 ...

  5. Linux - Reset a MySQL root password

    Use the following steps to reset a MySQL root password by using the command line interface. Stop the ...

  6. 《Programming WPF》翻译 第5章 4.元素类型样式

    原文:<Programming WPF>翻译 第5章 4.元素类型样式 命名样式非常有用,当你得到一组属性并应用到特点的元素上.然而,如果你想要应用一个统一的样式到所有确定元素类型的实例, ...

  7. Eclipse配置JDK的源代码的src.zip

    Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...

  8. Controlling Access in Java

    Referrence: Oracle Java Doc Two levels top level: public, or package-private (no explicit modifier) ...

  9. obiz

    ofbiz 安装 1. 由 binary 安装: 由 binary 安装非常简单, 以下是安装方法: 下载ofbiz-2.0-beta1-complete.tar.gz, 注意不是ofbiz-2.0- ...

  10. 【Struts2】新建一个Struts2工程，初步体验MVC

    实现目标 地址栏输入http://localhost:88/Struts2HelloWorld/helloworld.jsp 输入用户名,交由http://localhost:88/Struts2He ...