怎样js动态修改div的css属性

forrlx

在界面中想实现一个类似音乐播放的效果，参考css案例，做了如下方法：
.w文件中添加div和span：
      <div xid="playing" style="width:139px;height:5%;" align="center" class="playing1">
        <span xid="span32"/>  
        <span xid="span7"/>  
        <span xid="span8"/>  
        <span xid="span29"/>  
        <span xid="span33"/>  
        <span xid="span34"/>  
        <span xid="span35"/>  
        <span xid="span36"/>
      </div>  

css文件:
.playing1{
        display:block;
    position:relative;
    height: 30px;
    width: 30px;
}
.playing1 span{
  display:block;
  top:50%;
  width: 9px;
  height: 5px;
  background:#9b59b6;
  position:absolute;

  -webkit-animation: playing 1.5s infinite ease-in-out;
  -moz-animation: playing 1.5s infinite ease-in-out;
  -ms-animation: playing 1.5s infinite ease-in-out;
  -o-animation: playing 1.5s infinite ease-in-out;
  animation: playing 1.5s infinite ease-in-out;

}

.playing1 span:nth-child(2){
  left:11px;
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -ms-animation-delay: .2s;
  -o-animation-delay: .2s;
  animation-delay: .2s;
}

.playing1 span:nth-child(3){
  left:22px;
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  -ms-animation-delay: .4s;
  -o-animation-delay: .4s;
  animation-delay: .4s;
}

.playing1 span:nth-child(4){
  left:33px;
    -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -ms-animation-delay: .6s;
  -o-animation-delay: .6s;
  animation-delay: .6s;
}

.playing1 span:nth-child(5){
  left:44px;
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
  -ms-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
}
.playing1 span:nth-child(6){
  left:55px;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
.playing1 span:nth-child(7){
  left:66px;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.playing1 span:nth-child(8){
  left:77px;
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  -ms-animation-delay: 1.4s;
  -o-animation-delay: 1.4s;
  animation-delay: 1.4s;
}


@-webkit-keyframes playing {
    0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;-webkit-transform:translateY(-15px);background:#3498db;}
    50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
}

@-moz-keyframes playing {
    0% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;-moz-transform:translateY(-15px);background:#3498db;}
    50% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
}

@-ms-keyframes playing {
    0% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;-ms-transform:translateY(-15px);background:#3498db;}
    50% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
}

@keyframes playing{
  0%{height: 5px;transform:translateY(0px);background:#9b59b6;}
  25%{height: 30px;transform:translateY(-15px);background:#3498db;}
  50%{height: 5px;transform:translateY(0px);background:#9b59b6;}
  100%{height: 5px;transform:translateY(0px);background:#9b59b6;}
}

设置完成后，打开x5开发环境，则动画显示正常。
但选择”在浏览器中运行“，动画不显示了。
==============================
通过js动态修改css动画也不成功：
$(this.getElementByXid("playing")).addClass("playing1");   //提示无此函数.
this.comp('playing').addClass('playing1');                             //提示无此函数.
$('playing').addClass('playing1');                                         //不报错，但无任何反映

想要通过jis动态控制css动画的播放和停止，在css中增加了 .playing2  {}    .playing3 {}. 在IDE环境中直接修改，则正常，但通过浏览器运行则不正常。 通过按钮js代码修改，则出现上述一系列错误。

liangyongfei

playing  是div 的 xid对吧！  那就应该使用 this.getElementByXid("playing") 获取dom节点！然后用js或jquery 修改！

this.comp('playing')  只对 组件才能生效！获取组件的对象用的！ div又不是一个组件！

$('playing') 是把 playing 当成一个标签对待了！  jquery 选择器 不能根据 Xid 去获取的！


关于各种情况的修改样式，可以参考下：
http://docs.wex5.com/wex5-ui-question-list-2073/

你的需求还是用jquery 进行操作吧！

forrlx

liangyongfei 发表于 2017-7-7 14:35
playing  是div 的 xid对吧！  那就应该使用 this.getElementByXid("playing") 获取dom节点！然后用js或jqu ...

通过dom操作，可以修改class了。
但第一个问题，在IDE环境中动画有效果，但使用浏览器播放后，动画无效，是怎么回事啊

liangyongfei

forrlx 发表于 2017-7-7 16:23
通过dom操作，可以修改class了。
但第一个问题，在IDE环境中动画有效果，但使用浏览器播放后，动画无效， ...

http://docs.wex5.com/wex5-ui-question-list-2181/

看第二点！

有些dom节点是动态生成的！class样式也是动态生成的，就不可以在w同名的css文件中重写了！需要外面自定义一个css文件重写它的样式，然后当前文件中（w或js）引入这个css即可