JavaScript新增样式规则(推荐)

关键代码如下所示：

<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新增样式规则(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript中获取样式的原生方法小结

    ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color;    //获取颜色 2

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • JavaScript操作HTML元素和样式的方法详解

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素.  实例 <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> <

  • 基于JS实现简单的样式切换效果代码

    基于JS实现简单的样式切换效果代码

    本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

  • js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • JavaScript操作class和style样式代码详解

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

  • javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

  • JavaScript动态添加css样式和script标签

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

随机推荐