styleSheets

红宝书16.2.2，新发现个属性：document.styleSheets。

见名知意，是对样式表的操作，可以获取到当前页面所有的样式，也可以控制整体样式是否生效。如：link引入的样式、style标签内的样式、html标签内style属性的样式。

可以做和类似@meta一样的操作：

<style type="text/css">/*0*/#test {background: red;color: black;}
</style>
<style type="text/css">/*1*/#test {background: black;color: white;}
</style>

<div id="test">test</div>

window.addEventListener('resize', () => {const styleSheets = document.styleSheets;// 获取引入样式的数组const testEle = document.getElementById('test');if(window.innerWidth > 375) {styleSheets[1].disabled = true;// 禁用下标为1的，0生效testEle.innerText = '大于375';}else {styleSheets[0].disabled = true;// 禁用下标为0的，1生效styleSheets[1].disabled = false;testEle.innerText = '小于等于375';}
});

375的屏：

大于375的屏：

结尾：如果有大量样式，把style标签换成link即可。

styleSheets相关推荐

Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确用户名不允许空格,任何字符数字都行,不允许为空密码8-16位,不允许空格 ,小于8位给出提示密码必须 ...
浏览器报错‘‘styleSheets undefined‘‘
问题描述: 浏览器报错''styleSheets undefined'' this.sheetData.styleSheets = ""; 原因分析: 有的场景styleSheet ...
JQ 修改styleSheets关联keyframes 实现多段transform
场景:用的某可视化的云上产品 ,无法修改其前端代码,只能从hook里添加js: 需求:客户希望其地图组件有个左右摇摆旋转的动画: 遇到的问题:刚开始是想用animate(),但是animate()与t ...
Web Essentials之样式表StyleSheets
返回Web Essentials功能目录本篇目录智能感知视觉提示验证 Web标准转换器 Web Essentials中大多数的CSS功能也适用于LESS. 智能感知生成供应商特定的属性如 ...
针对JavaScript的常用事件、对象捕获和使用技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event ...
转小辉_Ray CORS（跨域资源共享）
前言:上一篇文章在写如何使用JSONP实现跨域请求的时候,偶然间提到CORS,即Cross-Origin Resource Sharing(跨域资源共享).虽然前些天也看了一下CORS相关的文章,但是 ...
js 刷新页面但是不闪烁_前端开发还在手动刷新页面？手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
windows下nodejs express安装及入门网站,视频资料，开源项目介绍
windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结第一步:下载安装文件下载地址 ...

styleSheets

红宝书16.2.2，新发现个属性：document.styleSheets。

可以做和类似@meta一样的操作：

结尾：如果有大量样式，把style标签换成link即可。

styleSheets相关推荐

最新文章

热门文章