DOM 间接操作 CSS

var oDiv = document.getElementsByTagName('div')[0];

oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.backgroundColor = 'green';
oDiv.style.border = '2px solid #eee';
oDiv.style.borderWidth = '2px';
oDiv.style.borderStyle = 'solid';
oDiv.style.position = 'absolute';
oDiv.style.left = '200px';
oDiv.style.top = '300px';
oDiv.style.cssFloat = 'left';

element.style.xxx -> 可读可写
小驼峰
值 -> 是字符串
- element.style.width // '200px'
复合值一定得拆解写
- ❌ element.style.border = '5px solid #000'
- ✅ element.style.borderWidth = '5px'
- ✅ element.style.borderStyle = 'solid'
- ✅ element.style.borderColor = '#000'
保留字前面加 css
- ❌ element.style.float = 'left'
- ✅ element.style.cssFloat = 'left'
element.style 可以查看当前元素可设置的样式的集合
element.style.width 和 element.offsetWidth 机制不同
- style.width 通过行间样式去访问，而且返回字符串
- offsetWidth 通过渲染引擎访问元素的物理宽到底是多少，是数值
- 不建议用 offsetWidth 访问宽，因为它会把 padding 也算进去

🌈 window.getComputedStyle(elem, null)

查看计算样式，计算之后的 CSS 值
ie8 及以下不支持，得用 elem.currentStyle 替换

function getStyles(elem, prop) {
	if (window.getComputedStyle) {
    if (prop) {
    	return window.getComputedStyle(elem, null)[prop];
    } else {
      return window.getComputedStyle(elem, null);
    }
  } else {
    if (prop) {
    	return window.currentStyle(elem, null)[prop];
    } else {
    	return window.currentStyle(elem, null);
    }
  }
}

获取伪元素的属性值

div::after {
	content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: pink;
}

window.getComputedStyle(div, 'after').width; // '100px'
window.getComputedStyle(div, 'after').height; // '100px'

需要在不同状态或操作下修改样式时，不建议用 elem.style.xxx 来修改样式，而推荐用类先定义好

<style type="text/css">
  .box {
  	...
  }
</style>

<body>
  <div class="box"></div>
  <script type="text/javascript">
  	const oBox = document.getElementsByClassName("box")[0];
    oBox.onclick = function() {
    	this.style.backgroundColor = 'pink';
      this.style.width = '200px';
      this.style.height = '200px';
    }
  </script>
</body>

// 👇🏻 推荐下面方式 👇

<style type="text/css">
  .box {
  	...
  }
  .box.active {
  	width: 200px;
    height: 200px;
    background-color: pink;
  }
</style>

<body>
  <div class="box"></div>
  <script type="text/javascript">
  	const oBox = document.getElementsByClassName("box")[0];
    oBox.onclick = function() {
    	this.className += ' active';
    }
  </script>
</body>