跳至主要内容

CSS Variables

在 ChatGPT 中打开

CSS变量在定制webforJ组件外观方面发挥着核心作用。这些变量存储可重用的值，例如颜色、字体大小和间距，可以在您的应用程序中一致地应用。

与依赖于CSS预处理器（如SASS或LESS）的传统方法不同，CSS变量允许在运行时动态样式。它们减少了重复，提高了可维护性，使样式表更易于阅读和管理。

定义CSS变量​

CSS变量使用双短横线（--）前缀定义，并可以在任何CSS选择器内作用域。然而，最常见的做法是在:root选择器中定义它们，这样可以全局作用。

:root {
  --app-background: orange;
}
:root伪类

：root伪类针对文档的根元素——通常是HTML中的<html>。它的行为类似于html，但具有更高的特定性。

CSS变量可以容纳任何字符串，而不仅仅是有效的CSS值。当与JavaScript一起使用时，这种灵活性尤为重要。

html {
  --app-title: webforJ;
}

组件特定变量​

要为特定组件定义或覆盖变量，请在该组件的选择器内声明它：

dwc-button {
  --dwc-button-font-weight: 400;
}
组件特定样式参考

每个webforJ组件支持一组特定的CSS变量，以控制其外观。这些变量在每个组件的样式 > CSS属性部分有文档说明。

使用CSS变量​

使用var()函数在样式中应用变量的值：

.panel {
  background-color: var(--app-background);
}

您还可以指定后备值，以防变量未定义：

.frame {
  background-color: var(--app-background, red);
}

使用webforJ操控变量​

CSS变量可以通过webforJ API动态更新，实现实时样式：

// 设置CSS变量
button.setStyle('--dwc-button-font-weight', '400');
使用JavaScript操控CSS变量

webforJ允许您使用页面或元素API在客户端执行JavaScript。这意味着您可以像在标准Web应用程序中一样，在运行时动态操控CSS变量。

// 设置CSS变量
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// 获取CSS变量
const value = el.style.getPropertyValue('--dwc-font-size-m');

其他资源​