javascript - 从JS应用CSS3转换不起作用

在使用Crosswalk的Android Hybrid应用中，需要在运行时将CSS3转换应用于HTML元素。我认为这是一项相对琐碎的任务，但发现它根本行不通。最初，我怀疑这是由于该规范的Crosswalk / Chromium实施中缺少功能所致。但是，为了安全起见，我在台式机Chrome浏览器中的操作大致相同，如下所示

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  alert('Transforming now!');
  var blobStyle = document.getElementById('blob').style;
  blobStyle.webkitTransform = 'translate(100px,50px);';
  blobStyle.webkitTransform = 'translate(100px,50px);';
  alert('Did it work?');
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob'>&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

令我惊讶的是，相对简单的代码也无法在Windows上的Chrome中提供预期的结果。我在这里做错了什么我无法发现，或者还有其他潜在的问题在起作用。也许有人在这里有我所没有的见识。

最佳答案

如果需要设置带前缀的CSS styles属性，请使用cssText。

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  document.getElementById('blob').style.cssText = '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);';
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob'>&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

或setAttribute()

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  document.getElementById('blob').setAttribute('style', '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);');
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob'>&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

根据评论更新

如果您已经设置了内联样式，例如在此示例中，内联样式将背景设置为红色，则需要附加新的CSS。

注意，请确保在;字符串的开头有分号newCSS，以便正确分隔属性

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  var newCSS = ';-webkit-transform: translate(100px,50px); transform: translate(100px,50px)'
  document.getElementById('blob').style.cssText += newCSS;
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob' style="background: red;">&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

关于javascript - 从JS应用CSS3转换不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46348384/