Javascript 如何更改CSS中变量的颜色？
我只想更改Javascript 如何更改CSS中变量的颜色？,javascript,html,css,Javascript,Html,Css,我只想更改computerScore和playerScore中的数字的颜色。在CSS中可以这样做吗 函数computerPlay（）{ 让值=[‘石头’、‘布’、‘剪刀’]， valueToUse=values[Math.floor（Math.random（）*values.length）]； 返回值使用； }; const rock=document.querySelector（“#rock”）； const paper=document.querySelector（“#paper”）； 常
computerScoreplayerScore函数computerPlay（）{
让值=[‘石头’、‘布’、‘剪刀’]，
valueToUse=values[Math.floor（Math.random（）*values.length）]；
返回值使用；
};
const rock=document.querySelector（“#rock”）；
const paper=document.querySelector（“#paper”）；
常量剪刀=document.querySelector（“#剪刀”）；
让computerSelection=document.querySelector（'.computerSelection'）；
让result=document.querySelector（'.result'）；
让分数=document.querySelector（'.computerScore'，computerScore=0，'playerScore'，playerScore=0）；
rock.addEventListener（'click'，pickRock）
函数pickRock（）{
让comp=computerPlay（）//必须创建变量comp。否则，如果在if语句中使用computerPlay（），有时文本内容将不会出现。请参阅stackoverflow注释。
如果（复合==‘岩石’）{
computerSelection.textContent=“计算机的选择：摇滚”；
result.textContent=“打成平局！”
score.textContent=`计算机分数：${computerScore+=0}您的分数：${playerScore+=0}`
}否则，如果（复合=='纸张'）{
computerSelection.textContent=“计算机的选择：纸张”；
result.textContent=“对不起！纸打石头”；
score.textContent=`计算机分数：${computerScore+=1}您的分数：${playerScore+=0}`
}否则如果（comp===‘剪刀’）{
computerSelection.textContent=“计算机的选择：剪刀”；
result.textContent=“干得好！石头胜过剪刀”；
score.textContent=`计算机分数：${computerScore+=0}您的分数：${playerScore+=1}`
}
};
我的javascript
石头，布，剪刀！
说明：
你将与电脑对抗。总共有3轮。祝你好运
选择：
您可以设置元素的innerHTML
，并在应用CSS的分数周围添加span标记
例如：
score.innerHTML = `Computer Score: <span style="color:red;">${++computerScore}</span> Your Score: <span style="color:blue;">${playerScore}</span>`
score.innerHTML=`计算机分数：${++computerScore}您的分数：${playerScore}`
您还可以使用类：
score.innerHTML = `Computer Score: <span class="computer-score">${++computerScore}</span> Your Score: <span class="player-score">${playerScore}</span>`
score.innerHTML=`计算机分数：${++computerScore}您的分数：${playerScore}`
您可以设置元素的innerHTML
，并在应用CSS的分数周围添加span标记
例如：
score.innerHTML = `Computer Score: <span style="color:red;">${++computerScore}</span> Your Score: <span style="color:blue;">${playerScore}</span>`
score.innerHTML=`计算机分数：${++computerScore}您的分数：${playerScore}`
您还可以使用类：
score.innerHTML = `Computer Score: <span class="computer-score">${++computerScore}</span> Your Score: <span class="player-score">${playerScore}</span>`
score.innerHTML=`计算机分数：${++computerScore}您的分数：${playerScore}`
第一件事是，您在结束
标记之前缺少一个结束
标记。在下面的示例中，该错误/打字错误已修复
由于您不熟悉JavaScript，可能还不熟悉HTML和CSS，因此我将尝试以相对缓慢的速度分阶段完成这项工作。当你有一个“简单的问题”需要解决时，我要做的第一件事是整理演示文稿，然后我将向你展示一种方法，通过这种方法，你可以减少页面上更新的内容量
我将要实现的演示文稿更改主要是减少上下滚动，以便更轻松地可视化正在发生的事情和更改。为此，我们将使用CSS网格，并使用以下CSS：
/* We use the universal selector ('*') to select all elements on
the page, and also we select all of the ::before and ::after
pseudo-elements; here we reset margin and padding to a known
default (what the default is doesn't matter, just that you know
what it is), and set all matching elements to the border-box
means of box-sizing: */
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
/* We use CSS grid to layout the contents of the <main> element: */
display: grid;
/* We define a two-column layout, using the repeat() function, with
each column taking one fractional unit of the available space: */
grid-template-columns: repeat(2, 1fr);
/* We define the width - using the CSS clamp() function as being
50vw (fifty percent of the width of the viewport, with a
minimum size of 200px and a maximum size of 600px: */
width: clamp(200px, 50vw, 600px);
/* A 1em top and bottom margin, with margin auto for left and right,
this automatically centers the <main> element within its parent
container: */
margin: 1em auto;
/* defining a gap between the grid-items (the child elements within
an element set to display: grid); this also applies to elements
that are children of 'display: flex' elements: */
gap: 0.5em;
}
.wrapper {
/* places the element in the first column of the defined grid,
and extending it to the last column of that defined grid: */
grid-column: 1 / -1;
text-align: center;
}
.container {
/* anticipating at least two other elements to be added to this
element ('scissors' and 'paper', unless you're playing 'rock,
paper, scissors, lizard, Spock') so setting up the container
to accept, and lay out, more elements automatically and
predictably: */
display: flex;
/* allowing the flex-item elements to wrap into a new row (or
column) if necessary: */
flex-wrap: wrap;
/* flex-items will be laid out spaced evenly with space between
the elements and their parent-element's boundaries: */
justify-content: space-around;
}
.container button {
/* to show interactivity on hover: */
cursor: pointer;
}
.results::before {
/* using CSS generated content to display a header/title/hint
as to what the element is for: */
content: "Results: ";
display: block;
font-size: 1.2em;
border-bottom: 2px solid #000;
}
*，
：：之前，
：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
主要{
显示：网格；
网格模板列：重复（2，1fr）；
宽度：夹钳（200px，50vw，600px）；
保证金：1em自动；
间隙：0.5em；
}
.包装纸{
网格柱：1/-1；
文本对齐：居中；
背景色：#f903；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
.容器按钮{
光标：指针；
}
.结果：：之前{
内容：“结果：”；
显示：块；
字体大小：1.2米；
边框底部：2倍实心#000；
}
石头，布，剪刀！
说明：
你将与电脑对抗。总共有3轮。祝你好运
选择：
第一件事是，您在结束
标记之前缺少一个结束
标记。在下面的示例中，该错误/打字错误已修复
由于您不熟悉JavaScript，可能还不熟悉HTML和CSS，因此我将尝试以相对缓慢的速度分阶段完成这项工作。当你有一个“简单的问题”需要解决时，我要做的第一件事是整理演示文稿，然后我将向你展示一种方法，通过这种方法，你可以减少页面上更新的内容量
我将要实现的演示文稿更改主要是减少上下滚动，以便更轻松地可视化正在发生的事情和更改。为此，我们将使用CSS网格，并使用以下CSS：
/* We use the universal selector ('*') to select all elements on
the page, and also we select all of the ::before and ::after
pseudo-elements; here we reset margin and padding to a known
default (what the default is doesn't matter, just that you know
what it is), and set all matching elements to the border-box
means of box-sizing: */
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
/* We use CSS grid to layout the contents of the <main> element: */
display: grid;
/* We define a two-column layout, using the repeat() function, with
each column taking one fractional unit of the available space: */
grid-template-columns: repeat(2, 1fr);
/* We define the width - using the CSS clamp() function as being
50vw (fifty percent of the width of the viewport, with a
minimum size of 200px and a maximum size of 600px: */
width: clamp(200px, 50vw, 600px);
/* A 1em top and bottom margin, with margin auto for left and right,
this automatically centers the <main> element within its parent
container: */
margin: 1em auto;
/* defining a gap between the grid-items (the child elements within
an element set to display: grid); this also applies to elements
that are children of 'display: flex' elements: */
gap: 0.5em;
}
.wrapper {
/* places the element in the first column of the defined grid,
and extending it to the last column of that defined grid: */
grid-column: 1 / -1;
text-align: center;
}
.container {
/* anticipating at least two other elements to be added to this
element ('scissors' and 'paper', unless you're playing 'rock,
paper, scissors, lizard, Spock') so setting up the container
to accept, and lay out, more elements automatically and
predictably: */
display: flex;
/* allowing the flex-item elements to wrap into a new row (or
column) if necessary: */
flex-wrap: wrap;
/* flex-items will be laid out spaced evenly with space between
the elements and their parent-element's boundaries: */
justify-content: space-around;
}
.container button {
/* to show interactivity on hover: */
cursor: pointer;
}
.results::before {
/* using CSS generated content to display a header/title/hint
as to what the element is for: */
content: "Results: ";
display: block;
font-size: 1.2em;
border-bottom: 2px solid #000;
}
*，
：：之前，
：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
主要{
显示：网格；
网格模板列：重复（2，1fr）；
宽度：夹钳（200px，50vw，600px）；
保证金：1em自动；
间隙：0.5em；
}
.包装纸{
网格柱：1/-1；
文本对齐：居中；
背景色：#f903；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
.容器按钮{
光标：指针；
}
.结果：：之前{
内容：“结果：”；
显示：块；
字体大小：1.2米；
边框底部：2倍实心#000；
}
石头，布，剪刀！
说明：
你将与电脑对抗。会有的