当前位置: 首页 > 面试题库 >

如何在JavaScript中设置多种CSS样式?

许正平
2023-03-14
问题内容

我有以下JavaScript变量:

var fontsize = "12px"
var left= "200px"
var top= "100px"

我知道我可以这样迭代地将它们设置为我的元素:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

是否可以一次将它们全部设置在一起,像这样?

document.getElementById("myElement").style = allMyStyle

问题答案:

如果您将CSS值作为字符串,并且尚未为该元素设置其他CSS(或者您不关心覆盖),请使用cssText属性:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

从某种意义上说,这很好,因为它避免了每次更改属性时都重新绘制元素(以某种方式一次全部更改它们)。

另一方面,您将必须先构建字符串



 类似资料:
  • 我是JavaFx新手。我在FXML中创建了一个网格窗格。我想将该网格窗格设置为下图。我尝试了以下答案,并尝试了更多的CSS元素。但这些都没有帮助我做到这一点。 用于GridPane、VBox、VBox的JavaFX CSS类 使用CSS在GridPane中居中显示子项 向GridPane JavaFX添加边框 我是否也使用了错误的方法?我可以使用GridPane实现这一点,还是TableView很

  • 问题内容: 我创建了以下内容… 我现在将如何设置CSS属性,例如? 问题答案: 用途:

  • 设置指定元素 CSS 规则的值。 使用 element.style 将指定元素的 CSS 规则的值设置为 val 。 const setStyle = (el, ruleName, val) => (el.style[ruleName] = val); setStyle(document.querySelector('p'), 'font-size', '20px'); // The first

  • 本文向大家介绍如何在JavaFX中使用CSS设置分隔符的样式?,包括了如何在JavaFX中使用CSS设置分隔符的样式?的使用技巧和注意事项,需要的朋友参考一下 分隔符是水平或垂直线,用于分隔应用程序的UI元素。在JavaFX中,javafx.scene.control.Separator类代表一个分隔符,要创建一个分隔符,您需要实例化该类。您可以使用CSS控制分隔符的外观。 通过创建CSS文件并在

  • 问题内容: 是否可以像使用文本一样使用CSS为外部.svg设置样式?我想念什么?我的标记和CSS看起来像这样: 问题答案: 如果像引用标签一样通过引用外部文件来包含svg图像,则svg图像中的元素将不包含在主文档DOM树中。他们组成了自己的树。因此,外部图像中的元素无法通过主文档中的CSS选择器进行匹配。 您可以像大多数其他元素一样设置元素的样式,例如为其设置边框。但是您不能(至少这样)访问外部图

  • 问题内容: 我有几个SVG图形,我想通过我的外部样式表修改颜色,而不是直接在每个SVG文件中修改。我不是将图形插入行中,而是将它们存储在我的图像文件夹中并指向它们。 我以这种方式实现了它们,以使工具提示能够正常工作,并且我还将每个工具提示都包装在标签中以允许链接。 这是SVG图形的代码: 我将以下内容放入我的外部CSS文件(main.css)中: 但是,它对图形没有影响。我还尝试了.socIcon