从CSS获取样式，JavaScript

Question

i使用实际样式制作JavaScript 3D动画。我创建工作代码，但是，如果样式在扩展的CSS文件中，则无法运行代码，因此仅在使用HTML代码编写样式时才能运行代码。有解决方案？

工作代码(小提琴上的olso(：

html

<div id="background">
   <div class="example" style="transform-origin: 50% 50% -200px">
      <p class="num">Example</p>
   </div>
<div>

CSS

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 80px;
}
#background{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;    
}
.example:nth-child(1){
   transform: perspective(200px);
   transform-origin: 50% 50% -200px;
}

.background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-style: solid;
}
.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;

}

javascript

setInterval(function(){ move()}, 2000);
function move(){    
   var elem = document.getElementsByClassName("example");
   var str = elem[0].style.transformOrigin;
   var res = str.split(" ");
   var pos = res[2].replace(/px/g, " ");
   var id = setInterval(frame, 20);
   function frame(){
     if (pos==500){
     clearInterval(id);
   }
   else {
    pos++;
    elem[0].style.transformOrigin = "50% 50%"+pos+"px";
   }
 }                                                                      
}

，正如您看到的一切都在起作用的那样，但是当我从HTML代码中删除样式时。我可以看到控制台中的错误：无法读取未定义的

Answer 1

您需要使用getComputedStyles。这将使您可以看到CSS计算值。JS无法直接从DOM元素中提取CSS样式，但需要处理已应用于它的样式。

您还需要使用getPropertyValue('transform-origin'(才能访问所需的属性。

您的分配到str以获取转换原点的第三值将看起来像：

    var str = getComputedStyle(elem[0]).getPropertyValue('transform-origin')

小提琴