javascript - 从 css、JavaScript 获取样式

Question

我使用实际样式制作 JavaScript 3D 动画。我创建了工作代码，但是，如果样式在扩展 CSS 文件中，我将无法运行代码，因此代码仅在样式以 HTML 代码编写时运行。有解决办法吗？

工作代码 (olso on fiddle) :

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')

Fiddle here