Ajout de CSS supplémentaire avec javascript

Question

Il y a cette image sur une page que je suis en train de coder et qui devrait être redimensionnée et centrée horizontalement et verticalement en fonction de certaines variables. Je ne peux pas utiliser la feuille CSS pour cela, car les variables width et height sont dynamiques. Par conséquent, je souhaite que javascript ajoute deux arguments supplémentaires (en haut et à gauche) au style de cette image spécifique.

J'ai essayé ce (qui m'a semblé tout à fait raisonnable)

function getStyleSheet() { 
    for(var i=0; i<document.styleSheets.length; i++) { 
     var sheet = document.styleSheets[i]; 
     if(sheet.title == 'StyleSheet') { 
      return sheet;} 
    } 
} 
var rule_sheet = getStyleSheet(); 
function changeText() { 
    rule_sheet.insertRule(".className { top:" (-(.5*newHeight))+ "; left:" +(-(.5*newWidth))+ ";}"); 
    showRules(); 
} 

J'ai aussi essayé d'ajouter un style en ligne à l'image comme ceci: (dans la fonction où l'image a été redimensionnée)

$(this).style.top= (-(.5*newHeight)); 
$(this).style.left= (-(.5*newWidth)); 

Aucune des deux solutions n'a fonctionné, alors que pour moi les deux méthodes semblaient plausibles. Qu'est-ce que je rate?

EDIT: Je réalisé que je n'ai pas ajouté le suffixe « px » à cela, mais après cela, il ne fonctionne toujours pas :(

EDIT II: Après conseils NickFitz, je réécrit le dernier bit de code à ceci:

$(".className").each(function() { 
    $(this).css("top", (-(.5*newHeight)), 2); 
    $(this).css("left", (-(.5*newWidth)), 2); 
}); 

cela ne fait changer la façon dont il ne regarde pas la façon dont je le veux, mais au moins je suis un peu

Answer 1

Essayez ceci:

$(this).css('top', (-(.5*newHeight))+'px'); 
$(this).css('left', (-(.5*newWidth))+'px'); 

Answer 2

plus proche d'une solution Si vous utilisez.. jQuery, vous voulez le CSS-related methods$(this) re transforme un objet jQuery, et la définition de la propriété style ne fera rien.

Answer 3

Vous devriez essayer quelque chose comme (en utilisant val à la fin des variables)

$(this).css({top: topval + "px", left : leftval + "px", width : widthval + "px", height : heightval + "px"});

ou vous pouvez utiliser:

$(this).width(widthval);

Answer 4

Pouvez-vous obtenir juste un ensemble emballé contenant <img> puis utilisez la commande .css() pour définir les valeurs appropriées?

$('#img').css({ 'width' : calculatedWidth + 'px', 'height' : calculatedHeight + 'px' });