CODEWITHSUNDEEP
javascriptjquerycssstyles
Jak Ju
Jak Ju

Reputation: 57

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?

Upvotes: 5

Views: 13108

Answers (3)

Jonathan
Jonathan

Reputation: 6537

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.

Upvotes: 0

krishna raikar
krishna raikar

Reputation: 2675

Replace this

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

With this 

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

Upvotes: 1

epascarello
epascarello

Reputation: 207537

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.

Upvotes: 2

Related Questions