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方法来获取所有样式，并使用getPropertyValue方法从中获取CSS变量值。

$(".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中，您可以使用--border

来更改$('body').get(0).style.setProperty("--border", "style");变量的值

请参见以下示例：

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变量

3 个答案: