如何在 javascript 中使用“cssText”？

如何在 javascript 中使用“cssText”？

2017-09-22

12798

javascript jquery css styles

我收到一条错误消息

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

我的代码：

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>"        
         }
     }
}

如何在 javascript 中使用 cssText ？

3个回答

您遇到的问题是，您有一个 jQuery 对象，但您却将其当作 DOM。

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

但为什么要使用 cssText？这样做似乎更好

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

或者因为您使用的是 jQuery

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

完成后，它仍然不起作用。原因是您在将元素添加到页面之前选择了它。 $('.postInner2'); 不会在循环中拾取您添加到页面的图像，因为您在添加之前选择了它。实际上，在将 postView 附加到页面之前，您无法更新宽度并选择元素。

epascarello

2017-09-22

用这个

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

替换此

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

krishnar

2017-09-22

这是一个 cssText 工作原理的非常基本的示例。我怀疑您的 img 变量未设置或引用了不存在的元素。

无论如何， img.style 未定义。

更新为了展示如何在 jQuery 中执行此操作（但为什么不使用 .css 或 .attr 而不是将纯 JS 与 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" />

编辑 2： 实际上，根据您更新的代码，它似乎无法工作。您尝试在图像存在于 DOM 中之前获取并操作它，例如： div.offsetHeight / divAspect ，其中实际的 div 实际上仅在下一行描述，并且从未添加到 HTML 中的任何位置。

我认为您必须重新考虑代码中的逻辑流程。

Jonathan

2017-09-22