我如何在 javascript 中使用“cssText”？答案

【问题标题】：How do i use 'cssText' in javascript?我如何在 javascript 中使用“cssText”？
【发布时间】：2018-03-03 12:54:56
【问题描述】：

我收到一条错误消息

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

【问题讨论】：

您的帖子中缺少定义变量img 的位置。您的代码中是否也缺少它？
@Jonathan 抱歉，我编辑了我的代码
因为img 是 jQuery，而不是 DOM 元素......
你为什么还要使用 cssText？设置值似乎是一种奇怪的方式。
等一下：您试图在将图像附加到文档 (<img class='postInner2' ...) 之前获取图像 (var img = $('.postInner2');)？您仍然缺少一些代码，因为 postView 从未添加到文档中。您必须等到那时才能定义img。

标签： javascript jquery css styles

【解决方案1】：

你遇到的问题是你有一个 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 附加到页面之前，您无法更新宽度并选择元素。

【讨论】：

【解决方案2】：

替换这个

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

有了这个

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

【讨论】：

【解决方案3】：

这是一个关于 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" />

Edit2： 实际上，根据您更新的代码，它看起来无法正常工作。您正在尝试在图像甚至存在于 DOM 之前获取和操作图像，例如：div.offsetHeight / divAspect 其中实际的 div 实际上只在下一行进行了描述，并且从未添加到任何地方的 HTML 中。

我认为您将不得不重新考虑代码中的逻辑流程。

【讨论】：