位置: 编程技术 - 正文

使用JavaScript创建新样式表和新样式规则(创建javascript函数)

编辑:rootadmin

推荐整理分享使用JavaScript创建新样式表和新样式规则(创建javascript函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript create,创建javascript函数,javascript用于搭建,javascript编写,javascript编写,javascript用于搭建,javascript创建对象及应用,javascript create,内容如对您有帮助,希望把文章链接给更多的朋友!

如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快。我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等。另外一种让页面更高效、更敏捷的方法是动态的添加或移除样式表里的样式,而不需要去查询DOM元素,对每个元素做样式调整。下面我们就来看看如何使用这种技术!

捕获样式表

你的页面上可能引用了不只一个的样式文件,你可以选择其中的一个。如果你指定了某个,你可以在HTML页面中的LINK 和 STYLE标签上加入ID来进行区别,获取CSSStyleSheet对象,它存放在document.styleSheets对象里。

一个重要的需要注意的事情是样式表的media属性——如果你不小心,当想往屏幕显示使用的样式表里做修改操作时,你也许会错误的修改了用于打印(print)时使用的样式表。CSSStyleSheet对象里有各种属性信息,需要时你可以从中获取。

有很多方法都可以让你捕获一个样式表,往里面添加新样式规则。

创建一个新的样式表

大多数时候,最好的方法是创建一个新的STYLE元素,动态的往里面添加规则。非常简单:

不幸的是,WebKit类型的浏览器需求做一点点小修改,才能让上面的代码正确的运行,但不管怎样,我们获得了想要的sheet。

添加样式规则 ? 标准的addRule方法

CSSStyleSheet对象里有一个addRule方法,它可以接受3个参数:选择器、样式规则的CSS代码和一个整数,这个整数用来指示样式表的位置(相对于同样的选择器):

使用JavaScript创建新样式表和新样式规则(创建javascript函数)

sheet.addRule("#myList li", "float: left; background: red !important;", 1);位置缺省值为-1,表示放在最后。为了进行额外的控制,或偷懒的写法,你可以在规则里添加!important来消除位置引起的问题。调用addRule会返回-1——它什么都不表示。

你会发现,这种技术的优势在于,它可以动态的往页面上添加样式规则,并应用它们;你不必对每个元素进行操作,浏览器会自动应用这些规则。高效吧!

新增样式规则

CSSStyleSheet对象里还有一个insertRule方法,但在早期的IE里是没有这个方法的。insertRule方法把addRule方法的前两个参数混合到了一起:

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);这个方法看起来很丑陋,但无疑也是非常有用的。

安全的应用样式规则

因为并不是所有的浏览器都支持insertRule,最好我们做一些封装来确保代码的有效执行。下面就是一个很简单的封装方法:

这个方法可以应对各种情况。如果你想把这个方法里的代码单独拿出来使用,最好用try{}catch(e){}把它们包起来。

为媒体查询(Media Queries)增加样式规则

有两个方法可以为特定的媒体查询增加样式规则。第一种是通过标准的insertRule方法:

sheet.insertRule("@media only screen and (max-width : px) { header { display: none; } }");因为老式的IE不支持insertRule,我们可以使用另外一种方法,就是创建一个STYLE元素,赋予它正确的media属性,然后往里面添加新的样式规则。这种方式会增加额外的STYLE元素,但十分的简单。

我认为动态的往样式表里添加样式规则是一种十分高效而且简单的技术。记住在你的下一个应用里试一下这种技术,它会省了你很多功夫。

(英文:Add Rules to Stylesheets with JavaScript.)

标签: 创建javascript函数

本文链接地址:https://www.jiuchutong.com/biancheng/295630.html 转载请保留说明!

上一篇:PHP list() 将数组中的值赋给变量的简单实例(php数组实现)

下一篇:浅析PHP中的i++与++i的区别及效率(php is_a)

  • 个税年度汇算清缴开始时间
  • 异地存货怎么审计
  • 计提增值税的会计凭证
  • 减资 股东
  • 个体户的附加税表怎么填写
  • 已知不含税金额和税额怎么求税率
  • 高铁票抵扣进项税
  • 房地产增值税怎么算举例说明
  • 抵扣税控盘维护费会计分录
  • 营业外支出结转损益
  • 公司借别的公司的钱再借给别的公司
  • 无形资产撤资要交税吗
  • 网上办税大厅查询财务负责人?
  • 计提生产经营
  • 三证合一的税号变了,法人怎么重新绑定企业
  • 资源税改革对政治的影响
  • 企业ci
  • 新成立公司必须报税么
  • 知识产权支出
  • 财务人员必备知识
  • 房屋出租何时缴纳房产税?
  • 周转材料盘点报告单
  • 公司与客户合作协议范本
  • 苹果手机搜不到airpods
  • 合同负债和预收账款的关系
  • win10如何删除windows账户
  • 合伙企业取得红利怎么交税
  • 收回财政结余资金账务处理
  • 企业所得税汇算清缴会计分录
  • 土地拍卖资金交到哪里
  • wifi安全助手每日提现
  • 圣海伦斯山国家火山纪念区
  • 印花税按次按月
  • 会计科目明细分类科目表
  • 进项税可以留底多长时间
  • vite vuex
  • thinkPHP5 tablib标签库自定义方法详解
  • 房产税城镇土地使用税申报期限
  • 业务招待费的企业是什么
  • yolo 模型训练
  • 建筑企业预缴所得税款税率
  • 小规模纳税人印花税减半征收政策
  • 对企业发票的监管
  • 企业现金清查的主要内容有什么
  • 企业法人名下的产业多了是好事吗
  • 我国耕地占用税使用的税率为
  • 代付电费开发票
  • 用货款抵扣供应商成本
  • 应收账款贷方余额应与什么科目合并后填入报表
  • 临时账户名称是什么意思
  • 报名费无发票要补交吗
  • 公司支付账户
  • 开公司如何选择行业
  • 补缴企业所得税
  • 销售商品托收承付怎么确认收入
  • 往来账是什么样的
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • mysql5.7免安装版配置
  • windows2003怎么开启远程
  • win8系统升级
  • solaris netstat
  • 如何查看电脑型号及配置
  • centos7(core)
  • 如何让xp系统崩溃
  • centos chrony
  • 如何汉化游戏
  • win10系统怎么cmd
  • 页里面 CDATA的作用说明
  • linux查找目录的命令
  • css hacks
  • python爬虫正则
  • js必须掌握的知识点
  • JavaScript中数组的相关方法
  • sed基本用法
  • jquery里的ready是什么意思
  • jquery+ajax实现直接提交表单实例分析
  • 佛山市国家税务局狮山分局简介
  • 湖南省五一劳动奖章
  • 税务暂停办理业务通知
  • 存款利息需要交税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设