通过 jQuery 访问 CSS 个变量

Question

如何在 jquery 中获取 css 变量？我正在尝试将 border: 2px solid #fff 替换为 css 变量 --border.

这是我的代码：

$(".header .navigation").on("show.bs.collapse", function(e) {
  console.log("open")
  $(".navigation").css("border", "2px solid #fff");
});

Answer 1

您可以使用getComputedStyle method to get all styles and get CSS variable value from it using getPropertyValue方法。

$(".header .navigation").on("show.bs.collapse", function(e) {
  var style = window.getComputedStyle(document.body);
  $(".navigation").css("border", style.getPropertyValue('--border'));
});

如果你想通过Javascript更新变量，那么你可以使用setPropertyValue方法。

$(".header .navigation").on("show.bs.collapse", function(e) {
  var style = window.getComputedStyle(document.body);
  style.setPropertyValue('--border', '2px solid #f00');
});

或者您可以使用 CSS var() 通过 CSS.

引用变量

$(".header .navigation").on("show.bs.collapse", function(e) {
  var style = window.getComputedStyle(document.body);
  $(".navigation").css("border", "var(--border)"));
});

Answer 2

在您的 CSS 中，您可以将导航的边框设置为等于 var(--border)。然后，在 javascript 中，您可以使用 $('body').get(0).style.setProperty("--border", "style");

更改 --border 变量的值

参见下面的示例：

const bodyStyle = $('body').get(0).style;
$(".header .navigation").on("mouseenter", function(e) {
  bodyStyle.setProperty("--border", "2px solid #f00");
})
.on("mouseleave", function(e) {
  bodyStyle.setProperty("--border", "0px solid #f00");
});

.header {
  height: 50px;
  width: 100%;
}

.navigation {
  height: 100%;
  width: 100%;
  background-color: black;
  border: var(--border);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
  <nav class="navigation">
  </nav>
</header>

Answer 3

您可以使用

.css("border-color", "var(--border)");

示例：

setTimeout(function() {
    $("div").css("border-color", "var(--border)");
}, 1000);

:root {
  --border: red;
}

div {
  border: 1px solid green;
  width:100px;
  height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

通过 jQuery 访问 CSS 个变量

Accessing CSS variables via jQuery

jquery

html

css

css-variables