0

$('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

8
  • @Sevastopol' фигура css
    – Vector
    16 фев 2021 в 14:41
  • @Sevastopol' обновил код, посмотрите пожалуйста.
    – Vector
    16 фев 2021 в 14:47
  • Ну как бы код в вопросе работает, стрелка цвет меняет. В чём собственно поблема?
    – Qwertiy
    16 фев 2021 в 15:22
  • @Qwertiy не могу понять в чем причина, у меня аналогичный код, а before меняться не хочет.
    – Vector
    16 фев 2021 в 16:23
  • 1
    Судя по примеру, проблема явно не в этом участке кода.
    – De.Minov
    16 фев 2021 в 16:23

1 ответ 1

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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.