通过jQuery访问CSS变量

Question

你如何在jquery中获得css变量？我正在尝试用css变量--border替换border: 2px solid #fff。

这是我的代码：

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

Answer 1

您可以使用getComputedStyle方法获取所有样式并从中获取CSS变量值。

getPropertyValue

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

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

方法。

setPropertyValue

---

或者您可以使用CSS

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

通过CSS引用变量。

var()

Answer 2

在CSS中，您可以将导航的边框设置为等于

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

。然后，在您的javascript中，您可以使用var(--border)更改--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);
}

Answer 3

您可以使用

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

例：

.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;
}