Изменить css --before-border-left jquery

Question

$('input').on('change', function() {
  var color = $(this).val();
  $('#funnel_id_41').css('background', color);
  $('#funnel_id_41').css('--before-border-left', '15px solid'+color);
});

.funnel_item {
    width: auto;
    height: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    color: #fff;
    padding-left: 30px;
    padding-right: 20px;
}
.funnel_item:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 15px solid white;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.funnel_item:before {
    content: "";
    position: absolute;
    right: -15px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: var(--before-border-left, black);
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel_item" id="funnel_id_41" style="background: #003c70;--before-border-left: 15px solid #003c70;">
</div>
<input type="color">

Подскажите пожалуйста, как я могу с помощью jquery изменить --before-border-left

Answer 1

Через .css всё работает:

setInterval(() => {
  $("html").css(
    "--bg",
    "#" + (Math.random() * 0x1000000 | 0x1000000).toString(16).slice(1)
  )
}, 500);

html {
  --bg: silver;
}

body {
  background: var(--bg);
  transition: background-color 500ms linear;
}

<script
  src="//code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

БЛОГ НА HUSL

Изменить css --before-border-left jquery

Ответы (1 шт):