Jquery追加div并动态设置宽度答案

【问题标题】：Jquery append div and dynamically set the widthJquery追加div并动态设置宽度
【发布时间】：2022-01-12 04:36:04
【问题描述】：

我正在尝试将 div 附加到 table 中的 td。但是，当我附加 div 时，我想先获取 td 的 clientWidth（以考虑不同的屏幕尺寸），然后将 div 的宽度设置为该宽度：

var tdWidth = document.getElementById("someId").clientWidth; // ex: 165

td.append("<div Div1 style='margin:auto; width:150px;'><div msg style='color:red'>" + "Text, Text, Text" + "</div></div>");

现在我正在尝试将 165 值应用于 Div1（宽度当前被硬编码为 150px - 我不想对其进行硬编码而是动态设置它），但我不知道如何做到这一点，我尝试做类似的事情：

  $('Div1').width(tdWidth);

和

  var tdWidthPx= tdWidth + 'px';

  $('Div1).css("width",tdWithPx);

理想情况下，我希望在附加它时设置宽度，以便在显示文本 id 时以正确的宽度显示。

提前致谢。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

没有名为Div1 或msg 的HTML 属性。因此，这成为无效的 HTML。

您可以像这样附加宽度，而无需最初对其进行硬编码。

var tdWidth = document.getElementById("someId").clientWidth; // ex: 165

td.append("<div style='margin:auto; width:" + tdWidth + "px;'><div  style='color:red'>" + "Text, Text, Text" + "</div></div>");

否则，您可以分配一个 id，然后根据 id 更改宽度。

var tdWidth = document.getElementById("someId").clientWidth; // ex: 165

td.append("<div id='Div1' style='margin:auto; width:150px;'><div style='color:red'>" + "Text, Text, Text" + "</div></div>"); // giving an id to the div element(this id should be unique)

使用id改变宽度。

var tdWidthPx= tdWidth + 'px';

$('#Div1').css("width",tdWithPx);

如果您在程序后期不动态更改 div 宽度，请使用第一种方法。

【讨论】：