如何使JavaScript函数更改CSS？

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

var points = 0;

if (points >= 50) {

  (make an image appear or show)

}

然后我将如何使图像出现？我想如果在CSS中将图像显示设置为“无”可能会起作用，但是我该如何更改它呢

var点=0；
函数add（）{
积分+=1；
score.innerHTML=分数；
如果（点数==10）{
score.innerHTML=“10”；
LV.innerHTML=2；
}
如果（点数>=30）{
LV.innerHTML=3；
};
};
函数重置（）{
点数-=1；
score.innerHTML=分数；
如果（点您可以这样做：

var points = 0;

const img = document.getElementById("image")

if (points >= 50) {

  img.style.display = "block"

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

JavaScript通过向元素添加
style
属性来更改HTML元素的内联样式。但是如果不想使用内联样式，则可以写入
标记。
首先，在
head
标记中创建
style
标记，然后写入

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

另请参见：
在
添加时调用函数
和
重置
函数调用

function showHideImage() {
      if(points >= 50 ){
        image.style.display = "block";
      } else {
        image.style.display = "none";
      }
}


var点=0；
const image=document.querySelector（“img”）；
函数showHideImage（）{
如果（点数>=50）{
image.style.display=“block”；
}否则{
image.style.display=“无”；
}
}
函数add（）{
积分+=1；
score.innerHTML=分数；
如果（点数==10）{
score.innerHTML=“10”；
LV.innerHTML=2；
}
如果（点数>=30）{
LV.innerHTML=3；
};
showHideImage（）；
};
函数重置（）{
点数-=1；
score.innerHTML=分数；
如果（点将图片上传到图像文件中，并在代码中输入正确的路径

var点=0；
如果（点数>=50）{
var img=document.createElement（“img”）；
img.src=“1.png”；
var src=document.getElementById（“x”）；
src.appendChild（img）；
} 与使用内联事件和样式不同，标记应该通过尽可能多地在外部使用Javascript和CSS来保持尽可能干净，使用单个事件侦听器执行显示图像所需的点的增加/减少。仅当存在
src
属性时，图像才会显示，因此通过修改该图像以使用源的
dataset
属性，
data src
可以编程切换
src
属性quite很容易。下面的代码使用
incrementer
变量来加速测试-对于最终版本，这可能是
1
，但在这里设置为
10


let points=0；
设递增者=1；
const lv=document.getElementById（'lv'）；
const sp=document.getElementById（'score'）；
const img=document.querySelector（'img.click[data src]”）；
document.querySelectorAll（'按钮[数据任务]）.forEach（btn=>{
btn.addEventListener（'click'，函数（e）{
开关（this.dataset.task）{
个案"增加":
点数+=递增者；
打破
“减少”一案：
点数-=递增者；
打破
}
let level=lv.textContent；
如果（点数>=50）{
如果（！img.hasAttribute（'src'））img.src=img.dataset.src；
}否则{
if（img.hasAttribute（'src'））img.removeAttribute（'src'）；
}
如果（点数>0&&points%10==0&&points<40）级别=点数/10；
sp.textContent=点数；
lv.textContent=级别；
});
})
@font-face{
字体系列：“确定Sans”；
src:url（“https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff）格式（'woff'）；
}
p{
线高：1px；
}
身体{
文本对齐：居中；
背景：#000000；
z指数：5；
字体系列：确定sans；
颜色：白色；
字体大小：30px；
}
#靴子{
变换：比例（1）；
动画：无限；
}
p{
变换：比例（0.5）；
动画：textPulse 5s无限；
}
.点击{
宽度：70px；
变换：比例（1）；
动画：脉冲5s无限；
盒影：红色5px 5px；
}
.得分{
颜色：白色；
动画：附魔5s无限；
}
.重置{
动画：取消激活脉冲7s无限；
变换：比例（1）；
}
钮扣{
颜色：白色；
动画：取消激活5s无限脉冲；
}
@关键帧附魔{
0% {
颜色：白色；
}
20% {
颜色：#c4abff；
}
40% {
颜色：#d9d6ff；
}
60% {
颜色：#fae8ff；
}
100% {
颜色：白色；
}
}
@关键帧脉冲{
0% {
变换：比例（0.95）；
长方体阴影：0 rgba（0,0,0,0.7）；
不透明度：1；
变换：translatey（0px）；
}
50% {
变换：比例（1）；
盒影：0 10px rgba（0,0,0,0）；
不透明度：0.7；
变换：translatey（20px）；
}
100% {
变换：比例（0.8）；
长方体阴影：0 rgba（0,0,0,0）；
不透明度：1；
变换：translatey（0）；
}
}
@关键帧textPulse{
0% {
变换：比例（0.50）；
不透明度：1；
}
50% {
变换：比例（0.55）；
不透明度：0.9；
}
100% {
变换：比例（0.50）；
不透明度：1；
}
}
@关键帧臀部{
0% {
颜色：黑色；
盒影：0 2 4白色；
}
20% {
颜色：#4d；
}
40% {
颜色：黑色；
}
60% {
颜色：#687d7b；
}
100% {
颜色：黑色；
}
}
@关键帧取消激活脉冲{
0% {
颜色：黑色；
}
20% {
颜色：#a10000；
}
50% {
颜色：#ff4d00；
}
56% {
颜色：黑色；
}
70% {
颜色：#ff4d00；
}
90% {
颜色：#bfac3b；
}
100% {
颜色：黑色；
}
}
@关键帧按钮覆盖1{
0% {
颜色：黑色；
}
20% {
颜色：#82fffd；
}
50%
}
按钮{宽度：80px；高度：30px；字体系列：确定SAN；字体大小：11px；光标：指针}
[数据文本]：在{content:attr（数据文本）}之前
这是你的灵魂。
1
0
增加功率级
降低功率电平
我想我现在明白了！
最简单的方法是更改CSS，可以通过以下方式完成：

document.getElementById（“img”）.style.display=“inline block”
JS无法更改CSS。JS通过将样式添加为
内联样式来应用样式。