getComputedStyle test

getComputedStyle and getPropertyValue pratice

by Ting-Yuan Chang

HTML

<div class="block">abc 測試
</div>
<div class="getValue">
</div>

CSS

.block {
  background: pink;
  width: 10rem;
  height: 10rem;
}

.getValue {
  background: gray;
  height: 2rem;
}
.getValue:before {
  content: "Get Value"
}

JavaScript

var block = document.querySelector(".block");
var getValue = document.querySelector(".getValue");
block.animate([
	{transform: "translateX(0)"},
  {transform: "translateX(300px)"}
], {
	duration: 3000,
  iterations: Infinity,
  easing: "ease"
})

block.animate([
	{transform: "rotateX(90deg)"},
  {transform: "translateX(300px) matrix3d(0.132423, 0.984297, 0.11672, 0, -0.984297, 0.11672, 0.132423, 0, 0.11672, -0.132423, 0.984297, 0, 0, 0, 0, 1)"}
], {
	duration: 3000,
  iterations: Infinity,
  easing: "ease"
})

getValue.addEventListener("click", function() {
	console.log(window.getComputedStyle(block).getPropertyValue("transform"))
})