JS控制CSS

原创 2007年09月12日 12:30:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS控制样式</title> <style type="text/css"> .entry {  display:block; } </style> <script type="text/javascript"> //目前暂对styleSheets没有研究。。。这东西兼容起来貌似挺麻烦的 var Browser = {  IE : /MSIE/.test(navigator.userAgent)  , FF : /Firefox/.test(navigator.userAgent)  , OP : !!window.opera };

!function () {     if (window.CSSStyleSheet) {         var wc = window.CSSStyleSheet.prototype;         wc.addRule = function (a, b) {             this.insertRule(a + "{" + b + "}", this.cssRules.length);         };         wc.removeRule = function (a) {             this.deleteRule(a);         };         wc.__defineGetter__ && wc.__defineGetter__("rules", new Function("return this.cssRules"));     } }();

var hidden = function (name, styleText) {  var ss = document.styleSheets[0], rs = ss[Browser.OP ? 'cssRules' : 'rules'], i;  for (i = 0 ; i < rs.length ; i ++)   if (rs[i].selectorText.toLowerCase() == name.toLowerCase()) rs[i].style.display = styleText; }; </script> <button onclick="hidden('.entry', 'block')">显示</button> <button onclick="hidden('.entry', 'none')">隐藏</button> <br /> <br /> <span class="entry">我是字</span><hr class="entry" /> <div style="background:#000000;" class="entry">&nbsp;</div> <textarea class="entry" style="width:100px;height:20px;"> </textarea> </body> </html>

web前端开发之版本控制(缓存处理)

公司项目每次发布或者更新迭代后,会有缓存问题,除了其他一些比较常见的方法,发现gulp能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道...
  • AnterWang
  • AnterWang
  • 2017年01月19日 15:23
  • 4068

利用js动态控制animation动画

一般我们写css3 animation动画的时候都是把它们定死在某个值不能改变,其实在js中是有相应的对象可以达到动态控制keyframes关键帧的目的举个例子: 这个表盘效果,客户需要指针每个...
  • cztflove
  • cztflove
  • 2015年09月11日 17:39
  • 13397

用JS控制CSS基本样式

详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 {...
  • yemou_blog
  • yemou_blog
  • 2015年12月14日 11:15
  • 1065

记一次 JS 模拟 CSS active 效果的过程

转自:http://blog.csdn.net/zhangxin09/article/details/8253679 所谓的界面触控效果,就是用户点下去的时候,界面立刻产生变化以反馈给用户知道:...
  • chelen_jak
  • chelen_jak
  • 2016年01月02日 11:01
  • 1658

验证css文件和js文件加载顺序问题

结论: 1.给html添加相同属性不同属性值的的css样式,后面的css文件样式会覆盖前面的css文件样式 2.给标签添加弹出事件,前后两个js文件都会执行,现执行js文件1,后执行js文件2 ...
  • qq616252396
  • qq616252396
  • 2015年05月28日 11:15
  • 916

昨天学了js的控制css样式,自己做了个算卦小程序

上课学习加课外学习的一点知识,做了个小转盘,都是些小知识点,附上源代码...
  • qq2012277033
  • qq2012277033
  • 2016年10月27日 12:52
  • 1072

js控制动画暂停、开始及js外部样式和style属性的添加移除

动画效果主要是css的animation属性:http://www.runoob.com/cssref/css3-pr-animation.html 即动画的暂停和继续是修改属性: animatio...
  • u012063507
  • u012063507
  • 2017年03月27日 10:45
  • 2192

用js+css实现帧动画播放的功能

_ 为了确保点击时候播放_cancelSelectObject: function (id) { var _this = this; _this._selected = fa...
  • cong_wa
  • cong_wa
  • 2016年09月09日 10:44
  • 813

JS控制CSS伪元素的方法(下)

声明:这个系列文章的下篇转载自博客园,以下是原文标题及链接 js如何控制css伪元素内容(before,after) http://www.cnblogs.com/yunkou/p/4269974...
  • AkashaicRecorder
  • AkashaicRecorder
  • 2016年11月01日 09:51
  • 301

原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式2;css表达式3  "的方式直接更改...
  • qq_31984915
  • qq_31984915
  • 2016年11月06日 12:45
  • 4135
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS控制CSS
举报原因:
原因补充:

(最多只允许输入30个字)