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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
js实现前端分页页码管理
Jan 06 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
微信小程序canvas分享海报功能
Oct 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
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
JS常用正则表达式总结【经典】
2017/05/12 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python删除windows垃圾文件的方法
2015/07/14 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
高中毕业生自我鉴定
2013/11/03 职场文书
优秀村官事迹材料
2014/01/10 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
鉴史问廉观后感
2015/06/10 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL