时间戳

首页 > 解决方案 > 如何让 JavaScript 函数更改 CSS？

javascript - 如何让 JavaScript 函数更改 CSS？

问题描述

在我做的很多项目中，我总是有一个问题，我想让 JavaScript 改变 CSS 样式。我尝试阅读其他问题，但没有解决我的答案。如果变量高于某个数字的值，例如：

var points = 0;

if (points >= 50) {

  (make an image appear or show)

}

那么我将如何使图像出现？我发现如果在 CSS 中将图像显示设置为 none，它可能会起作用，但我将如何改变它呢？

var points = 0;

function add() {
  points += 1;
  score.innerHTML = points;

  if (points == 10) {
    score.innerHTML = "10";
    LV.innerHTML = 2;
  }
  if (points >= 30) {
    LV.innerHTML = 3;
  };

};

function reset() {

  points -= 1;
  score.innerHTML = points;

  if (points <= 0) {
    points = 0;
    score.innerHTML = points;
  };
}
@font-face {
  font-family: "Determination Sans";
  src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}

p {
  line-height: 1px;
}

body {
  text-align: center;
  background: #000000;
  z-index: 5;
  font-family: determination sans;
  color: white;
  font-size: 30px;
}

#bootain {
  transform: scale(1);
  animation: butt 3s infinite;
}

p {
  transform: scale(0.5);
  animation: textPulse 5s infinite;
}

.click {
  width: 70px;
  transform: scale(1);
  animation: pulse 5s infinite;
  box-shadow: red 5px 5px;
}

.score {
  color: white;
  animation: enchant 5s infinite;
}

.reset {
  animation: deactivatepulse 7s infinite;
  transform: scale(1);
}

button {
  color: white;
  animation: deactivatepulse 5s infinite;
}

@keyframes enchant {
  0% {
    color: white;
  }
  20% {
    color: #c4abff;
  }
  40% {
    color: #d9d6ff;
  }
  60% {
    color: #fae8ff;
  }
  100% {
    color: white;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    opacity: 1;
    transform: translatey(0px);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    opacity: 0.7;
    transform: translatey(20px);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
    transform: translatey(0);
  }
}

@keyframes textPulse {
  0% {
    transform: scale(0.50);
    opacity: 1;
  }
  50% {
    transform: scale(0.55);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.50);
    opacity: 1;
  }
}

@keyframes butt {
  0% {
    color: black;
    box-shadow: 0 2 4 white;
  }
  20% {
    color: #4d4d4d;
  }
  40% {
    color: black;
  }
  60% {
    color: #687d7b;
  }
  100% {
    color: black;
  }
}

@keyframes deactivatepulse {
  0% {
    color: black;
  }
  20% {
    color: #a10000;
  }
  50% {
    color: #ff4d00;
  }
  56% {
    color: black;
  }
  70% {
    color: #ff4d00;
  }
  90% {
    color: #bfac3b;
  }
  100% {
    color: black;
  }
}

@keyframes buttonhover1 {
  0% {
    color: black;
  }
  20% {
    color: #82fffd;
  }
  50%
}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<br>



<img src="https://i.ibb.co/QmRsxNK/Sowl.png" class="click" style="width: 100px"></img>
<br>

<p id="LV">LV: 1</p>

<p id="score">SOUL power (XP): 0</p>
<button id="bootain" onclick="add();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Increase power level</button>

<button id="reset" onclick="reset();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Decrease power level</button>
<h7 class="characters"></h7>

标签： javascripthtmlcss

解决方案

你可以这样做：

var points = 0;

const img = document.getElementById("image")

if (points >= 50) {

  img.style.display = "block"

} else {
  img.style.display = "none";
}

styleJavaScript 通过将属性添加到元素来更改 HTML 元素的内联样式。但是，如果您不想使用内联样式，则可以写入<style>标签。首先，在标签中创建一个style标签head，然后编写

var styleEl = document.querySelector("style");
var points = 0;
styleEl.innerHTML = `img { display: ${points >= 50 ? 'block' : 'none' };}`

另请参阅：W3Schools 的 JavaScript DOM CSS 教程

推荐阅读