使用 TypeScript 在元素上设置 CSS 样式

作者

使用 TypeScript 在元素上设置 CSS 样式

Set CSS styles on an Element using TypeScript

在 TypeScript 中为元素设置 CSS 样式：

  1. 选择特定元素。
  2. 设置style元素对象的属性以更新其样式。
  3. 例如，el.style.backgroundColor = 'lime'。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box">Hello world</div>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.backgroundColor = 'lime';
  box.style.color = 'white';
  box.style.fontSize = '2em';
}

我们使用
document.getElementById
方法来选择元素。null如果 DOM 中不存在具有提供的元素，该方法将返回id，因此我们必须确保该变量在访问其上的任何属性之前box不存储值。null

如果您需要从元素中删除特定的 CSS 属性，请将其设置为空字符串。

如果您改为使用
document.getElementsByClassName
方法，请将元素键入为 html 元素的集合。

源代码/index.ts
const boxes = Array.from(
  document.getElementsByClassName('box') as HTMLCollectionOf<HTMLElement>,
);

boxes.forEach(box => {
  box.style.backgroundColor = 'lime';
  box.style.color = 'white';
  box.style.fontSize = '2em';
});

该getElementsByClassName方法返回一个类型
HTMLCollectionOf<Element>并且Element接口不包含该
style属性。

这就是为什么我们使用
类型断言
将集合类型化为HTMLCollectionOf<HTMLElement>.

我们使用该style对象在元素上设置 CSS 属性。

请注意，使用该对象时，多词属性名称采用驼峰式大小写。 style

如果您不喜欢 CSS 属性名称采用驼峰式命名，则可以改用
setProperty
方法。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.setProperty('background-color', 'lime');
  box.style.setProperty('color', 'white');
}

该setProperty方法采用以下 3 个参数：

  1. propertyName– 我们要修改的 CSS 属性的名称。请注意，多个单词的属性名称必须用连字符连接。
  2. value– CSS 属性的新值。
  3. priority– 可以设置为important或空字符串。

您还可以使用该style对象从元素中读取 CSS 属性值。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  box.style.setProperty('background-color', 'lime');

  // 👇️ "lime"
  console.log(box.style.backgroundColor);

  // 👇️ "16px"
  console.log(window.getComputedStyle(box).fontSize);
}

第一个示例读取元素的背景颜色属性的值。

但是，如果该属性未设置为元素的内联样式，这将不起作用。

如果您需要考虑在外部样式表中设置的样式，请改用该window.getComputedStyle方法。

在应用样式表后，该getComputedStyle方法返回一个对象，该对象包含传入元素的所有 CSS 属性的值。

–

发表评论