First CSS variable

2021/11/09

by wllai2001

HTML

<div class='body'>
  <div class='container'>
    <!-- 參考網址：https://hospodarets.com/css_properties_in_depth-->
    <div class='item' ID='left'>
    點我設定100px
    </div>
    <div class='item' ID='right'>
    點我設定150px
    </div>
  </div>
</div>

CSS

/*共用變數放這*/
:root{
  --s:100px;
  --border-color-setting:red;  
}


.item{
 /* --border-color-setting:green;*/
  width:var(--s);
  height:var(--s);
  border:1px solid var(--border-color-setting);
  display:inline-block;
  /*var中可與字串混用，但變數一定要在最前面，且後面要用逗點隔開後續字串*/
  margin:var(--s, 0 0);
  /*如果前方有值可以這樣使用*/
  /*margin:0 var(--s, 0 0);*/
  /*或是乾脆不要混用*/
  margin:0 var(--s) 0 0;
  text-align:center;
  padding:5px 0 0 0;
}

JavaScript

//可用JS取得CSS的變數，並進行調整
const rootStyles = getComputedStyle(document.documentElement);
//const varValue = rootStyles.getPropertyValue('--s').trim();

document.getElementById('left').addEventListener('click',
	function(){    
  	document.documentElement.style.setProperty('--s', '100px');
    console.log(rootStyles.getPropertyValue('--s'));
  },
  false
);
document.getElementById('right').addEventListener('click',
	function(){    
  	document.documentElement.style.setProperty('--s', '150px')
    console.log(rootStyles.getPropertyValue('--s'));
  },
  false
);

//const varValue = rootStyles.getPropertyValue('--s');