JavaScript检测浏览器是否支持CSS变量代码实例


Posted in Javascript onApril 03, 2020

JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式。

有三种方法可以实现这样的效果:

  • 控制样式表—可以添加、删除、修改样式表。
  • 控制样式规则—可以添加、删除、修改样式规则。
  • 控制DOM中的单个元素—可以不依赖样式表来修改元素样式。

JavaScript 检测浏览器是否支持 CSS 变量:

const isSupported =
 window.CSS &&
 window.CSS.supports &&
 window.CSS.supports('--a', 0);

if (isSupported) {
 /* supported */
} else {
 /* not supported */
}

JavaScript 操作 CSS 变量的写法如下:

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
vue双向绑定简要分析
Mar 23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
详解vue的diff算法原理
May 20 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
原生js滑动轮播封装
Jul 31 Javascript
JS内置对象和Math对象知识点详解
Apr 03 #Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 #Javascript
JavaScript鼠标拖拽事件详解
Apr 03 #Javascript
Javascript组合继承方法代码实例解析
Apr 02 #Javascript
Javascript异步编程async实现过程详解
Apr 02 #Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 #Javascript
JavaScript运动原理基础知识详解
Apr 02 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php学习之数据类型之间的转换代码
2011/05/29 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python手机号码归属地查询代码
2016/05/04 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
作文评语集锦
2014/12/25 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技