微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

js 操作css实现代码_javascript技巧

php中文网
发布： 2016-05-16 18:51:33
原创
1515人浏览过

当我们需要的是一条规则的时候，总不能在每次dom发生变化的时候去执行这个操作，否则也太效率低下了。
好在dom中css rules也是可以修改的。不过不同浏览器的对于css rules的接口描述也不同，其中ie中以类似hash table的方式，而ff以数组方式。
从可编程性上说，ie的接口描述更讨程序员喜欢，不过从逻辑上说，ff显然更为合理。
我提供了类似于ie的方式对两套代码进行简单包装，不过ie在dom的css removeRule之后并不能确定同步的把规则兑现。所以最好用规则覆盖的方式而非remove。
需要注意的是，在使用改js函数的时候，页面上至少要有一个style标签。下面是代码及示例。

PhotoG
PhotoG

PhotoG是全球首个内容营销端对端智能体

PhotoG 121
查看详情 PhotoG
复制代码 代码如下:



<script> <BR>function addCSSRule(key,value){ <BR>var css = document.styleSheets[document.styleSheets.length-1]; <BR>css.cssRules ? <BR>(css.insertRule(key+"{"+value+"}", css.cssRules.length)) : <BR>(css.addRule(key,value)) ; <BR>} <BR>function removeCSSRule(key){ <BR>for(var i = 0; i < document.styleSheets.length; i++){ <BR>var css = document.styleSheets[i]; <BR>css.cssRules ? <BR>(function(){ <BR>for(var j = 0; j < css.cssRules.length; j++){ <BR>if(css.cssRules[j].selectorText==key){ <BR>css.deleteRule(j); <BR>} <BR>} <BR>})() : <BR>(css.removeRule(key)) ; <BR>} <BR>} <BR></script>

abc



相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript 撑出页面文字换行_javascript技巧 下一篇：根据服务器时间作为起始，显示时钟的小程序_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript性能监控_关键指标采集与分析系统 首先明确JavaScript性能监控系统需聚焦核心指标采集与分析。从首屏JS加载时间、长任务检测、函数执行耗时、内存使用情况到错误异常捕获，全面收集运行数据；通过navigator.sendBeacon上报，结合聚合采样与分类标记策略，将数据存入时序数据库或日志系统；服务端计算分位数、对比版本差异、设置阈值告警，并关联用户行为分析瓶颈；最终在CI/CD中集成基线检查，定期生成报告，推动专项优化，形成“采集→上报→分析→优化”闭环，确保数据可读、可追溯、可行动。
2025-11-21 17:33:07
430
JavaScript_依赖管理与版本控制 答案：JavaScript项目依赖管理需合理使用package.json分类依赖，遵循SemVer版本规范，通过^~符号控制更新范围，提交package-lock.json确保环境一致，并定期执行npmoutdated、npmaudit进行更新与安全检查，保障项目稳定可维护。
2025-11-21 17:31:33
275
解决Flask AJAX文件上传中request.files为空的问题 本文详细阐述了在Flask应用中通过AJAX进行文件上传时，request.files对象为空的常见问题及解决方案。核心在于正确地将文件对象添加到FormData，并配置jQueryAJAX请求的contentType和processData参数为false，以确保文件数据能正确发送至服务器端，从而实现高效稳定的文件上传功能。
2025-11-21 17:29:22
867
JavaScript动态管理CSS：获取与修改CSSStyleSheet规则 本教程旨在指导开发者如何正确地通过JavaScript访问和修改网页的CSSStyleSheet对象及其内部的CSS规则。我们将探讨直接通过DOMAPIdocument.styleSheets获取样式表的方法，而非通过网络请求CSS文件，并详细演示如何遍历cssRules来读取或修改样式定义，从而实现动态样式调整，尤其适用于浏览器扩展开发场景。
2025-11-21 17:29:01
559
WordPress Contact Form 7 条件重定向与安全集成实践 本教程探讨WordPressContactForm7表单提交后的条件重定向需求，特别是在处理敏感数据或支付集成时的挑战。文章强调了自定义JavaScript重定向可能带来的安全和合规风险，并强烈建议在涉及Stripe等支付服务时，优先选择经过充分测试和验证的第三方插件解决方案，以确保数据安全、简化PCI合规性并降低开发与维护成本。
2025-11-21 17:21:25
507
深入理解LeetCode 1038：将二叉搜索树转换为累加树 本文详细解析了如何将二叉搜索树（BST）转换为累加树（GreaterTree），即每个节点的值更新为原节点值加上所有大于或等于该节点值的总和。核心算法利用了二叉搜索树的特性，通过反向中序遍历（右-根-左）结合累加和，以递归方式高效地完成转换，并重点阐释了递归调用中累加值传递的机制。
2025-11-21 17:21:06
707
掌握CSS样式表：在Web页面和Chrome扩展中高效访问与修改样式规则 本教程旨在指导开发者如何在Web页面和Chrome扩展中正确访问和修改CSS样式表。文章将深入探讨使用document.styleSheetsAPI来获取页面加载的样式表对象，并详细介绍如何遍历cssRules以读取和修改CSS规则，特别是针对CSS变量的操作，避免直接fetchCSS文件导致的常见误区。
2025-11-21 17:14:12
286
JavaScript日期库_日期计算最佳实践 选对日期库如date-fns或Day.js，规范输入输出格式，避免原生Date陷阱，统一使用标准解析与格式化方法，可有效减少JavaScript中日期处理的bug。
2025-11-21 17:07:23
353
自定义按钮触发原生颜色选择器：利用实现UI优化 本教程详细阐述了如何通过自定义按钮或图标触发HTML原生颜色选择器，同时隐藏默认的输入框，以实现更美观的用户界面。核心方法是利用元素与的关联性，结合CSS隐藏输入框，从而在点击自定义UI元素时直接唤起颜色选择器，无需JavaScript。
2025-11-21 17:07:00
401
路由管理：History API与Hash路由 前端路由主要有Hash和History两种模式。1.Hash路由利用URL中#后的部分，兼容性好、无需后端配置，适合静态服务器部署，但URL不美观且SEO较差；2.HistoryAPI路由通过pushState和popstate实现无刷新更新URL，URL简洁利于SEO，需后端支持返回入口文件。选择依据为：若需兼容旧浏览器或静态部署，选Hash模式；若追求良好用户体验和专业URL结构且可配置服务器，则选History模式。现代框架如VueRouter、ReactRouter均支持两者，可根据场景
2025-11-21 17:07:02
449
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部