How do i use 'cssText' in javascript?

Question

I got an error message

"Uncaught TypeError: Cannot set property 'cssText' of undefined"

My Code:

var div = $('.postImg2')
var img = $('.postInner2');
var divAspect = 20 / 50;
var imgAspect = img.height / img.width;
if (postData.files != null) { // if attached images or videos exist
     for (var i = 0; i < postData.files.length; i++) {
         if(postData.files.length == 1){ 
             postView = postView + "<div class='postImg1'><img class='postInner1' src='img_timeline/" + postData.files[i].url + "'></div>"        
         } else if(postData.files.length == 4){ 
             if(imgAspect <= divAspect){
                 var imgWidthActual = div.offsetHeight / imgAspect;
                 var imgWidthToBe = div.offsetHeight / divAspect;
                 var marginLeft = -Math.round((imgWidthActual-imgWidthToBe)/2);
                 postView = postView + "<div class='postImg2'><img class='postInner2' src='img_timeline/" + postData.files[i].url + "'></div>"        
                 img.style.cssText = 'margin-left:'+marginLeft+'px;'
             } else {
                 img.style.cssText = 'margin-left:0;'
             }
         } else if (postData.files.length > 4){ 
             postView = postView + "<div class='postImg3'><img class='postInner3' src='img_timeline/" + postData.files[i].url + "'></div>"        
         }
     }
}

How do I use cssText in javascript?

Missing from your post is where you define the variable `img`. Is it missing from your code, too? — Jonathan, Sep 22 '17 at 03:26
Why are you using cssText anyway? Seems like a strange way to set the value. — epascarello, Sep 22 '17 at 03:33
Wait: you are trying to get your image (`var img = $('.postInner2');`) before you have even appended it to the document (` — Jonathan, Sep 22 '17 at 03:47
Related Question: https://stackoverflow.com/a/3968772/6908282 — Gangula, Sep 16 '22 at 15:36

score 2 · Accepted Answer · answered Sep 22 '17 at 03:36

The problem you have is you have a jQuery object and you act like it is DOM.

img.get(0).style.cssText = 'margin-left:0;'
//or
img[0].style.cssText = 'margin-left:0;'

but why use cssText? Seems better to do

img[0].style.marginLeft = "0px";

or since you are using jQuery

img.css("marginLeft", "0px")

And after that is complete it still will not work. The reason is the fact you are selecting the element before it is added to the page. The $('.postInner2'); is not going to pick up the image you added to the page in the loop since you select it before it is added. In reality you can not update the widths and select the elements until you append postView to the page.

score 1 · Answer 2 · answered Sep 22 '17 at 03:39

1

Replace this

img.style.cssText = 'margin-left:'+marginLeft+'px;'

With this

img.css('margin-left',marginLeft+'px')

answered Sep 22 '17 at 03:39

krishnar

2,537
9
23

Jonathan · Answer 3 · 2017-09-22T03:58:56.710

Here is a really basic example of how cssText works. I suspect your img variable is not set or is referencing a non-existant element.

Whatever the case, img.style is undefined.

Update To show how you could do this in jQuery (but why are you not using .css or .attr rather than mixing and matching pure JS with jQuery) ?

var img = $('.postInner2');
// Get the first element from the jQuery array and apply a style with cssText.
img[0].style.cssText = "width:100px;";

/**
 * A better solution would be ".css" because it will apply to
 * ALL elements with class .postInner2 without having to loop
 */

// $(".postInner2").css({width:"100px", marginLeft: "10px"});

/**
 * Or if you have to override everything in the class:
 */

// $(".postInner2").attr("css","width:100px;margin-left:10px");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="postInner2" src="//placehold.it/400x200" alt="Placeholder" />

Edit2: actually, based on your updated code it looks like there is no way it can work. You are trying to fetch and manipulate your image before it even exists in the DOM, for example: div.offsetHeight / divAspect where the actual div is actually only described on the next line, and not ever added into the HTML anywhere.

I think you are going to have to re-think the flow of logic in your code.

How do i use 'cssText' in javascript?

3 Answers3