js设置变量: dom节点.style.setProperty('--名称','内容'); js读取变量: 方式一:dom节点.style.getPropertyValue('--名称'); 该方式只能读取setProperty设置的变量,不能读取在css中的变量,但都能设置css变量 方式二:getComputedStyle(dom节点).getPropertyValue('--名称'); 能读取css中设置的变量和setProperty设置的变量,但不能.setProperty来设置变量 js删除变量: dom节点.removeProperty('--变量名'); css设置变量: 可以在任何选择器内声明变量,变量具有自己的作用域 :root{ 通常在:root根元素里声明全局变量,保证任何一个选择器内都能读到,对应document.documentElement --变量名:值 } css读取变量: var(--变量名,默认值可选空格等都会被视作参数的内容) 选择器{ 样式:var(--变量名) (0)变量能够继承，当变量值不合法时，会使用属性的默认值 (1)定义的变量不能用作属性名 (2)大小写敏感 (3)变量拼接: 如果变量是一个字符串可直接与其他字符串拼接 --bar: 'hello'; --foo: var(--bar)'world'; (4)变量是数字不能直接与数值单位直接连用: 解决方法: --gap: 20; margin-top: calc(var(--gap) * 1px); (5)变量是带单位的字符串,无效 /* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo); } (6)同一个 CSS 变量,可以在多个选择器内声明。读取的时候,不同优先级内生效不同的变量 transition过渡写法: css方式: .property { background-color: var(--houdini-colorA); color: var(--houdini-colorB); transition: 1s --houdini-colorA, 1s --houdini-colorB; } .property:hover { --houdini-colorA: yellowgreen; --houdini-colorB: deeppink; } js方式:见上面方法 animation过渡写法: css方式: div { background-color: var(--houdini-colorA); color: var(--houdini-colorB); animation: change 10s infinite linear; } @keyframes change { 20% { --houdini-colorA: yellowgreen; --houdini-colorB: deeppink; } ... } js方式:见上面方法 less和sass中变量格式和操作同css一致,才能使用js来操作(未验证) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210239.html原文链接：https://javaforall.net
