首页 >> js开发 >> js代码JavaScript检测浏览器是否支持CSS变量代码实例
js代码JavaScript检测浏览器是否支持CSS变量代码实例
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式。有三种方法可以实现这样的效果:
控制样式表—可以添加、删除、修改样式表。
控制样式规则—可以添加、删除、修改样式规则。
控制DOM中的单个元素—可以不依赖样式表来修改元素样式。
控制样式表—可以添加、删除、修改样式表。控制样式规则—可以添加、删除、修改样式规则。控制DOM中的单个元素—可以不依赖样式表来修改元素样式。JavaScript 检测浏览器是否支持 CSS 变量:
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
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');
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');以上就是本文的全部内容,希望对大家的学习有所帮助。
控制样式表—可以添加、删除、修改样式表。
控制样式规则—可以添加、删除、修改样式规则。
控制DOM中的单个元素—可以不依赖样式表来修改元素样式。
控制样式表—可以添加、删除、修改样式表。控制样式规则—可以添加、删除、修改样式规则。控制DOM中的单个元素—可以不依赖样式表来修改元素样式。JavaScript 检测浏览器是否支持 CSS 变量:
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
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');
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章:
- js解决echarts数据二次渲染不成功的问题js大全
- js详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)js大全
- jsmpvue 项目初始化及实现授权登录的实现方法js大全
- js一文读懂vue动态属性数据绑定(v-bind指令)js大全
- jsVue清除定时器setInterval优化方案分享js大全
- js解决elementUI 切换tab后 el_table 固定列下方多了一条线问题js大全
- js如何实现echarts markline标签名显示自己想要的js大全
- js详细分析vue表单数据的绑定js大全
- js代码基于VSCode调试网页JavaScript代码过程详解
- jsecharts 使用formatter 修改鼠标悬浮事件信息操作js大全