css dynamic change via jQuery Is it possible?

Question

I have the following structure:

var prop = new Array();
prop[0] = "margin : auto";
prop[1] = "padding : 5px";
prop[2] = "border : none";
...

$(elemento).css({

 for(i=0; i< prop; i++) {
        /*Aqui vão serem feitos os laços do for e vão imprimir a toda linha, alguma coisa como:
       document.write(prop[i]);
        */
        margim: auto,
        /*para cada laço do for, uma linha dessa será criada*/
   }

});

For each element, the print inside the for will be different.

The idea is to see if in the end

The interpreter css, for this case, interprets something as:

$(elemento).css({

        margim: auto,
        padding: 5px;
        border: none,
        etc...    

});

There’s a way to make it work?

On the advice of a colleague here, I came to this solution.

But because it’s json, And inside the variable there are keys, I didn’t know how to solve:

var variavel = 
{ 
  '0%' : { 'margin-left':'-0%'},
 '33%' : { 'margin-left':'-0%'},
 '38%' : { 'margin-left':'-100%'},
 '66%' :{ 'margin-left':'-100%'},
 '71%' : { 'margin-left':'-200%'},
 100%' : { 'margin-left':'-200%'},
}

Here’s the shape I’m using to get to the array:

  var tempoTransicao = 5;
  var quantasImagens = 4;
  var tamanhoIntervalos = Math.round(100/quantasImagens);
  var tempoImagens = 0;
  var t = 0;    
  var imagem = [];


    for (i = 0; i < quantasImagens; i++) {  

        tMin = t + tempoTransicao;
        tMax = t + tamanhoIntervalos;   
        t+=tamanhoIntervalos;

        if(i==0) tMin=0;
        if(i==quantasImagens) tMax=100;       

        imagem[i] = [];
        imagem[i].push(tMin + "% { margin-left:-" + tempoImagens + "%};");
        imagem[i].push(tMax + "% { margin-left:-" + tempoImagens + "%};");

        tempoImagens+=100;

    }

  });

  texto = "";

  for (po=0; po<imagem.length; po++) {
      texto += imagem[po][0]+imagem[po][1];
  }

Answer 1

The method css jQuery can receive a Javascript object, as you propose to do.

What cannot be done is to construct an object from an array the way it is in the question. But don’t worry: just create the object in a very similar way, but before calling the function. Then you pass the ready object to the function. Following example:

var definicaoCSS = {};

for (var i = 0; i < prop.length; i++) {
    var trechos = prop[i].split(':');
    definicaoCSS[trechos[0].trim()] = trechos[1].trim();
}

// quando acabar, você chama o método css
$(elemento).css(definicaoCSS);

However, it would be desirable for you to have already had object-shaped properties from the beginning. I can imagine a scenario or two where someone would set up a array before (i.e.: obtaining definitions from text boxes), but even in these scenarios it is possible to dispense with the array and do everything with object.

Answer 2

As you reported that the structure is still being defined, you can use json to manipulate multiple css attributes in an element.

Ex.:

var styles = {"color":"blue", "font-size":"13px"};
$("#elemento").css(styles);

Answer 3

Please, I was able to do it the way you said, but now I have another problem:

The json object, thus printed in the log

(8) ["0% { margin-left:-0%}", "25% { margin-left:-0%}", "30% { margin-left:-100%}", "50% { margin-left:-100%}", "55% { margin-left:-200%}", "75% { margin-left:-200%}", "80% { margin-left:-300%}", "100% { margin-left:-300%}"]
0
:
"0% { margin-left:-0%}"
1
:
"25% { margin-left:-0%}"
2
:
"30% { margin-left:-100%}"
3
:
"50% { margin-left:-100%}"
4
:
"55% { margin-left:-200%}"
5
:
"75% { margin-left:-200%}"
6
:
"80% { margin-left:-300%}"
7
:
"100% { margin-left:-300%}"
length
:
8
__proto__
:
Array(0)

Now the problems are the following and are 2:

I need to launch this result as a parameter and I know two ways to do it;

To)

  $.keyframe.define([{
     name: 'tocaSlide',
    // Quando adiciono **definicaoCSS** aqui dá erro no script
  }]);        

B)

  $("body").css("@keyframe tocaSlide", function() {

    // Quando adiciono **definicaoCSS** aqui NÃO dá erro no script, mas o keyframe não recebe o style

  });

What I do now?

See the full js:

$(document).ready(function(e) {

  $("div.slider ul.slide").ready(function(e) {

      var tempoTransicao = 5;
      var quantasImagens = $("div.slider ul.slide li img").size();
      var tamanhoIntervalos = Math.round(100/quantasImagens);
      var tempoImagens = 0;
      var t = 0;    
      var imagem = "";
      var imagem2 = "";

      for (i = 0; i < quantasImagens; i++) {    

          tMin = t + tempoTransicao;
          tMax = t + tamanhoIntervalos; 
          t+=tamanhoIntervalos;

          if(i==0) tMin=0;
          if(i==quantasImagens) tMax=100;         

          imagem += tMin + "% { margin-left:-" + tempoImagens + "%},";
          imagem += tMax + "% { margin-left:-" + tempoImagens + "%},";

          imagem2 += "'" + tMin + "'% { 'margin-left':'-" + tempoImagens + "%'},";
          imagem2 += "'" + tMax + "'% { 'margin-left':'-" + tempoImagens + "%'},";

          tempoImagens+=100;

      }
      var slide = {};

      var trechos = imagem.slice(0, -1).split(',');
      var trechos2 = imagem2.slice(0, -1).split(',');
      slide[trechos2];

      //console.log(trechos);

      $.keyframe.define([{
         name: 'tocaSlide',
         slide
      }]);       

      $("<style> @keyframes tocaSlide").html(trechos);

      $("div.slider ul.slide").css({
            'animation-duration' : tempoTransicao + 's',
      });

  });

});