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?

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?

• javascript
• jquery
• css
• styles

• 2 Missing from your post is where you define the variable img. Is it missing from your code, too? – Jonathan Commented Sep 22, 2017 at 3:26
• @Jonathan sorry, I edited my code – Jak Ju Commented Sep 22, 2017 at 3:31
• 1 Because img is jQuery, not DOM element.... – epascarello Commented Sep 22, 2017 at 3:32
• Why are you using cssText anyway? Seems like a strange way to set the value. – epascarello Commented Sep 22, 2017 at 3:33
• Wait: you are trying to get your image (var img = $('.postInner2');) before you have even appended it to the document (<img class='postInner2' ...)? You're still missing some code because postView is never added into the document. You would have to wait until then before defining img. – Jonathan Commented Sep 22, 2017 at 3:47

3 Answers 3

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 plete 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.

Replace this

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

With this

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

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./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.