Javascript 为自定义HTML元素创建高度和宽度属性

我正在创建自定义html标记/元素，然后通过JavaScript/jQuery动态添加这些标记/元素。我的最终目标是创建一个自定义元素，如

，其中高度和宽度将设置渲染大小。我已经找到了如何创建自定义元素并拥有可以保存数据的自定义属性，但是我似乎找不到修改渲染的方法。要明确的是，我没有CSS高度和宽度不工作的问题。我的问题是，我可能有数百个大小不一的元素，这些元素在加载文档后注入DOM之前都是未知的

我一开始研究了带有属性选择器的CSS，但它似乎无法将属性值带入CSS规则。类似地，我也研究了CSS的

attr（）

函数，但它似乎只适用于

内容

。我发现CSS4中的所有属性都可以使用这个函数，尽管我后来读到一些东西说CSS4不会发布，而是每个模块都会更新CSS，所以这似乎还没有成为当前的标准

如果能就这个问题提供任何信息，我们将不胜感激。我觉得有办法做到这一点，但我不太确定如何做到。不过要清楚，我不希望使用JavaScript/jQuery解析标记，并使用

$（）.css（）

或类似的方法修改该元素，因为这样会修改实际的标记。我希望标记保持不变，属性修改呈现，类似于

标记的工作方式

编辑：

---

我不介意在自定义元素的构造函数中使用JS/jQuery执行此操作，前提是它可以在不修改内联

style

属性的情况下完成，而保持标记不变。

自定义标记将显示内联，内联不能具有宽度和高度。您需要显示块或内联块

addContent（'这里有一些内容'，200,50）；
函数addContent（内容、宽度、高度）{
const elm=document.createElement（'xt-vertical-layout'）；
setAttribute（'style'，'width:${width}px；height:${height}px；`）；
elm.innerText=内容；
document.body.append（elm）；
}

xt垂直布局{
显示：内联块；
颜色：白色；
填充物：5px；
背景色：红色；
}

您通常会在CustomElement的类中处理此问题，在该类中，您可以作为

this

访问节点，如果节点继承自Htmlement，则可以访问其DOM方法，如

getAttribute（）

类垂直布局扩展了HtmleElement{
构造函数（）{
超级（）；
}
connectedCallback（）{
this.style.width=this.getAttribute（'width'）；
this.style.height=this.getAttribute（'height'）；
}
}
自定义元素。定义（'xt-vertical-layout'，VerticalLayout）；
//动态插入
const elem=document.createElement（'xt-vertical-layout'）；
元素setAttribute（'width'，'25px'）；
元素setAttribute（'height'，'25px'）；
文件.正文.附加（elem）
xt垂直布局{
边框：1px实心；
显示：内联块；
}

<>代码>我认为你不能用CSS来做这件事，除非你考虑内联样式。在
style=“height:30px”
中，您必须执行一些JS，我猜是这样的？是的，在本例中这很简单，但是您有内联样式，如果以后要应用另一个CSS，您必须处理特殊性问题。另外，您提到的JS，您是指修改内联样式属性吗，或者在自定义元素的构造函数中？如果这是第二个，我会喜欢（实际上更喜欢）的。好吧，有了JS，你可以做很多事情。第一个想法是更改样式属性，但我们可以做其他事情，比如使用随机类/IDI为该元素生成唯一的CSS。如果我在问题中没有充分解释，我表示歉意，但这根本不是我的问题。我的问题是，我将有这些自定义标记的倍数，我想通过使用内联宽度和高度属性来设置宽度和高度。问题是，在加载元素之前，我不知道所需的高度和宽度。它们不会都有相同的大小，并且会有很大的差异。我不能用静态CSS规则来实现这一点。编辑为DynamicGain，这根本不能回答我的问题。我希望能够在不修改标记的情况下实现此效果（即，我不希望在处理后添加内联样式属性），而是希望在幕后进行更多操作。我希望能够做到这一点，而不修改标记本身。按照您的方式进行时，标记会添加内联属性
style
。提取属性值的CSS规则可以做到这一点，但这似乎只适用于
content
属性。@Xandor如果您可以使用shadowDOM，则可以在元素的shadowDOM中附加样式表，但这样会失去对许多旧浏览器的支持（这不能是多填充的）。为什么不可以更改样式属性？失去对旧浏览器的支持目前对我来说并不是什么大问题，我正在做的工作本身就是实验性的。不改变加价对我来说不是一个破坏者，但我更愿意这样做。从本质上讲，我正在尝试编写一种标记语言，该语言将适合我已经构建的一个系统，该系统使用的是web浏览器。我们的想法是，人们将能够为此而发展。考虑到这一点，如果标记保持不变，那么对于第一次学习其他代码的人来说，共享/观察其他代码会更直观。话虽如此，我认为这个阴影空间将是我目前最接近幕后的东西。非常感谢！在您的位置上，我宁愿将标记和DOM作为两个分开的东西。使用