css 变量操作

悠悠 2021-07-24 19:03 317阅读 0赞

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 变量,可以在多个选择器内声明。读取的时候,不同优先级内生效不同的变量
    
    less和sass中变量格式和操作同css一致,才能使用js来操作(未验证)