Question

我需要通过JQuery或JS在没有直接CSS的情况下使网页背景变暗。

也许每次单击按钮时背景都会变暗5％？

我通过Google搜索，但是找不到任何东西。

Answer 1

$("p").on("click", function() {
  $("body").css({"background": "#222", "color": "#eee"});
});

<body>
Hello, people!
<p>Click me to darken!</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

如果您希望按钮切换亮/暗，这很容易做到：只需使用布尔值，然后执行以下操作：

dark = !dark

然后可以在jquery中的onclick函数上进行一些逻辑检查。

Answer 2

$(function(){
  $('.darken').on('click', function(){
    let color = $('body').css('backgroundColor');
    let valuesArr = color.split('(')[1].split(')')[0].split(', ');
    for(let i = 0; i < valuesArr.length; i++){
      valuesArr[i] = Math.round(valuesArr[i] * .95);
    }
    let newColor = 'rgb(' + valuesArr.join(', ') + ')';
    $('body').css('backgroundColor',newColor);
    console.log(newColor);
  });
});

body{background-color:#7f8faa}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="darken">Darken</button>

您可以将颜色值分成3个rgb部分（7f，8f和f4），然后分别降低这些值5％，将它们重新组合为一个值并应用。

Answer 3

好吧，如果您想通过javascript应用CSS样式，则有很多方法：

1-普通Javascript：

var element = document.getElementById("myElement");
element.style.background = "#333"; //replace by the value you want;

2-jQuery：

$("#myElement").css("background", "#333"); //replace by the value you want

现在，为了使div变暗，还有很多方法，包括：

1-使用CSS的“过滤器”属性：

$("#myElement").css("filter", "brightness(95%)"); //makes the element 5% darker

2-实现您自己的功能：

function darken(red, green, blue) {
  red *= 0.95;
  green *= 0.95;
  blue *= 0.95;

  return `rgb(${red}, ${green}, ${blue})`;
}

$("#myElement").css("background", darken(255, 255, 255));

Answer 4

您想要这样的东西吗？

//background: darken(#7f8ff4, 5%);
$( document ).ready(function() {
  var boxB = $("#boxB");
  boxB.css("background", "#7f8ff4");
  boxB.css("background-blend-mode", "darken");
  boxB.css('opacity', 0.5);
});

#boxA {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background: red;
}

#boxB {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 200px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxA"></div>
<div id="boxB"></div>

Answer 5

JavaScript

<body class="dark-bg">
<button onclick="darken()">Click for dark mode</button>
</body>

<script type="text/JavaScript">
function darken(){
 document.querySelector(".dark-bg").style.background = "#00e";
}
</script>

如何使用jQuery设置背景变暗

5 个答案: