Добавить стиль CSS в определенный класс через javascript

Question 1

Я получил эти строки кода и хочу добавить их только в определенный класс div. Таким образом, если фон темный, он должен быть filter: invert(1);, а когда фон ярче filter: invert(0);. Как я могу это сделать? Надеюсь, вы можете мне помочь... Я все еще в самом начале понимания js.

    function isDark( color ) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return ( match[1] & 255 )
         + ( match[2] & 255 )
         + ( match[3] & 255 )
           < 3 * 256 / 2;
}

$('div').each(function() {console.log($(this).css("background-color"))
    $(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
});

javascript jquery css

0

jomawie 23 Окт 2019 в 22:39

Answer

Вы можете проверить условие отдельно в операторе if else, как показано ниже.

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).css("filter", 'invert(1)');
  } else {
    $(this).css("filter", 'invert(0)');
  }
});

ИЛИ

Если вы хотите добавить css class, вы можете сделать это, как показано ниже

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).addClass("inverted");
  } else {
    $(this).addClass("not-inverted");
  }
});

В котором стили могут быть добавлены для нового class в вашем CSS, как показано ниже.

.inverted {
  filter: invert(1);
}

.not-inverted {
  filter: invert(0);
}

См. Фрагмент ниже.

function isDark(color) {
  var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
  return (match[1] & 255) +
    (match[2] & 255) +
    (match[3] & 255) <
    3 * 256 / 2;
}
/* 
$('div').each(function() {console.log($(this).css("background-color"))
    $(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
}); */

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(".logo").css("filter", 'invert(1)');
  } else {
    $(".logo").css("filter", 'invert(0)');
  }
});

body {
  height: 400vh;
}

.logo {
  position: fixed;
  top: 40px;
  right: 20px;
  background-image: url(https://image.freepik.com/free-vector/bicycle-shop-logo-design-vector_53876-40626.jpg);
  background-repeat: no-repeat;
  background-size: 100px;
  height: 100px;
  width: 100px;
  background-color: black;
}

.blabla {
  background-color: black;
  height: 50vh;
}

.blablabla {
  background-color: grey;
  height: 50vh;
}

.blablablabla {
  background-color: red;
  height: 50vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="blabla">test</div>
<div class="blablabla">test</div>
<div class="blablablabla">test</div>

0

Lal 23 Окт 2019 в 23:46

Спасибо. Но я не очень понял это. Чтобы прояснить мою проблему, вот jsfiddle. Я хочу инвертировать логотип или нет, когда фон темный или яркий.

–

jomawie

23 Окт 2019 в 23:17

это то, чего вы пытаетесь достичь?

–

Lal

23 Окт 2019 в 23:23

В вашем коде были ошибки. Я обновлю ответ измененным.

–

Lal

23 Окт 2019 в 23:23

В очередной раз благодарим за помощь. Чего я пытаюсь добиться, так это инвертирования логотипа div или самого логотипа, а не других. Поэтому, если фон черный, логотип должен быть белым, а если фон белый, логотип должен быть черным. Поэтому, когда кто-то просматривает веб-сайт с разными цветами фона, логотип всегда должен быть виден независимо от того, яркий фон или темный.

–

jomawie

23 Окт 2019 в 23:40

О... хорошо... тогда вы можете просто заменить $(this).css("filter", 'invert(1) на $(".logo").css("filter", 'invert(1). Измените его и в части else..

–

Lal

23 Окт 2019 в 23:44

Question 2

Вы можете проверить условие отдельно в операторе if else, как показано ниже.

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).css("filter", 'invert(1)');
  } else {
    $(this).css("filter", 'invert(0)');
  }
});

ИЛИ

Если вы хотите добавить css class, вы можете сделать это, как показано ниже

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).addClass("inverted");
  } else {
    $(this).addClass("not-inverted");
  }
});

В котором стили могут быть добавлены для нового class в вашем CSS, как показано ниже.

.inverted {
  filter: invert(1);
}

.not-inverted {
  filter: invert(0);
}

См. Фрагмент ниже.

function isDark(color) {
  var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
  return (match[1] & 255) +
    (match[2] & 255) +
    (match[3] & 255) <
    3 * 256 / 2;
}
/* 
$('div').each(function() {console.log($(this).css("background-color"))
    $(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
}); */

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(".logo").css("filter", 'invert(1)');
  } else {
    $(".logo").css("filter", 'invert(0)');
  }
});

body {
  height: 400vh;
}

.logo {
  position: fixed;
  top: 40px;
  right: 20px;
  background-image: url(https://image.freepik.com/free-vector/bicycle-shop-logo-design-vector_53876-40626.jpg);
  background-repeat: no-repeat;
  background-size: 100px;
  height: 100px;
  width: 100px;
  background-color: black;
}

.blabla {
  background-color: black;
  height: 50vh;
}

.blablabla {
  background-color: grey;
  height: 50vh;
}

.blablablabla {
  background-color: red;
  height: 50vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="blabla">test</div>
<div class="blablabla">test</div>
<div class="blablablabla">test</div>

0

Lal 23 Окт 2019 в 23:46

Спасибо. Но я не очень понял это. Чтобы прояснить мою проблему, вот jsfiddle. Я хочу инвертировать логотип или нет, когда фон темный или яркий.

–

jomawie

23 Окт 2019 в 23:17

это то, чего вы пытаетесь достичь?

–

Lal

23 Окт 2019 в 23:23

В вашем коде были ошибки. Я обновлю ответ измененным.

–

Lal

23 Окт 2019 в 23:23

В очередной раз благодарим за помощь. Чего я пытаюсь добиться, так это инвертирования логотипа div или самого логотипа, а не других. Поэтому, если фон черный, логотип должен быть белым, а если фон белый, логотип должен быть черным. Поэтому, когда кто-то просматривает веб-сайт с разными цветами фона, логотип всегда должен быть виден независимо от того, яркий фон или темный.

–

jomawie

23 Окт 2019 в 23:40

О... хорошо... тогда вы можете просто заменить $(this).css("filter", 'invert(1) на $(".logo").css("filter", 'invert(1). Измените его и в части else..

–

Lal

23 Окт 2019 в 23:44

Добавить стиль CSS в определенный класс через javascript

1 ответ

Похожие вопросы

Новые вопросы

javascript