将style.background设置为var不起作用

当使用 style.background 设置为 var 变量时，如果不起作用，可能是由于以下几个原因：

基础概念

CSS 变量（也称为自定义属性）允许在样式表中定义可重用的值。它们以 -- 开头，并且可以在整个文档中使用 var() 函数引用。

可能的原因及解决方法

变量未定义：
- 确保 CSS 变量已经在某个父元素或根元素上定义。
- 示例：
- 示例：

作用域问题：
- CSS 变量的作用域是基于其定义的位置。如果变量在某个特定的选择器内定义，它只能在该选择器及其子元素中使用。
- 示例：
- 示例：
拼写错误：
- 检查变量名是否拼写正确，包括大小写。
- 示例：
- 示例：
JavaScript 设置问题：
- 如果是通过 JavaScript 动态设置变量，确保脚本执行顺序正确，并且变量已经正确设置。
- 示例：
- 示例：
浏览器兼容性：
- 虽然大多数现代浏览器都支持 CSS 变量，但仍需检查目标浏览器的兼容性。
- 可以使用 Can I use 查看兼容性信息。

示例代码

假设我们有一个简单的 HTML 和 CSS 结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --bg-color: #f0f0f0;
    }
    .element {
      width: 200px;
      height: 200px;
      background: var(--bg-color);
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

在这个例子中，.element 的背景色将会是 #f0f0f0。

调试步骤

检查控制台：
- 打开浏览器的开发者工具，查看是否有任何 CSS 相关的错误信息。

使用 getComputedStyle：
- 可以通过 JavaScript 检查元素的实际计算样式，确认变量是否被正确应用。
- 示例：
- 示例：

通过以上步骤，通常可以找到并解决 style.background 设置为 var 不起作用的问题。

将style.background设置为var不起作用

、

我修改了这个工作的Javascript code，将style.background设置为变量"x“，它不再切换。问题出在哪里？<script> /* This commented-out code worksvar x = document.body; x.style.backgroundColor = x.style.ba

浏览 148提问于2021-11-04得票数 2

3回答

Angular 6将Html中的背景色设置为CSS变量

、、

我使用Angular 6，我有一个简单的div，想从模板内部设置这个div的背景色。在传递正常颜色时，此操作效果良好。但这不适用于CSS变量。这个例子是可行的这个例子不起作用。<div [style.background]="'var(--some-css-var)'">...&

浏览 0提问于2018-09-12得票数 6

回答已采纳

7回答

使用JavaScript在空闲时隐藏鼠标光标

、、、

如果鼠标在一段时间内处于不活动状态(例如，5秒)，那么是否可以使用JavaScript将cursor属性设置为属性none，并在再次激活时将其设置为auto？= "#000";, true);var tim

浏览 13提问于2010-07-28得票数 14

回答已采纳

1回答

如何在JavaScript查询中使用How变量

、、

浏览 0提问于2013-09-02得票数 0

3回答

如何使用jQuery将每个项目的背景色设置为下一个项目？

、、、、

我有一个列表有4个项目，每个项目都有特定的背景颜色，设置在样式属性中。<div style="background: green"></div></div> <div style="background: blue"></di

浏览 4提问于2016-10-17得票数 1

回答已采纳

1回答

HTML - JavaScript函数未处理responseText

、、

脚本将按钮设置为相同的颜色，然后更改按钮的颜色以显示机器人的位置。="#008000"; document.getElementById("C").style.background ="#008000"; document.getElementById("D&

浏览 0提问于2018-04-08得票数 0

3回答

HTML5画布和JS -鼠标运动，奇怪的错误

、、、

<canvas id = "myCanvas" width = "1500" height = "500"></canvas> varthisCanvas = document.getElementById("myCanvas").style.background = 'white'; var context= m

浏览 8提问于2015-04-24得票数 0

回答已采纳

2回答

JS设置attr(value)在DOM中不返回

、、、

我使用WebSocketd发送数据并从STDOUT中检索数据，然后使用JS访问消息： ws.onopen= function() { };

浏览 34提问于2018-07-24得票数 1

回答已采纳

1回答

如何在for循环中设置javascript变量以供以后使用

因此，我正在创建一个登录表单，当某些条件在表单之后不满足继续时，我将在测试所有标准之后设置一个要测试的变量。如果该变量($cantcontinue)设置为“true”，我希望发送一个控制台消息，其中包含未满足的条件。= "unset") { var i

浏览 2提问于2017-05-06得票数 0

回答已采纳

3回答

Div背景图像

、、

我在Mojo SDK工作，这是用来为Palm Pre webOS开发应用程序。this.controller.get("imageDiv").backgroundImage = "url(../images/marks/mark-" + this.markNo + ".png)"; // Not Working $("imageDiv&qu

浏览 1提问于2009-08-27得票数 0

0回答

我可以在else语句上使用两个操作吗？

代码不需要下面这一行就能正常工作：这是不起作用的代码： var hourNow = today.getHours(); if (hourNow > 20) {; document.getElementById("body

浏览 10提问于2017-06-16得票数 0

1回答

如何将javascript函数分配给用php呈现的制表器格式化程序？

、、

这不起作用： array_push($row2['formatter']='function(cell, formatterParams){var pType = cell.getValue();if(pType == "Patient"){cell.getElement().style.background = "yellow";}return pType;}'); 我可以在使用客户端javascript之后将函数赋值给数组。这是可行的： t

浏览 8提问于2019-12-15得票数 0

2回答

随机(r，g，b)色发生器

、、、、

document.getElementById("myButton").onclick = function() { r =255*r; g = 255*g; b = 255*b;

浏览 3提问于2016-01-31得票数 1

回答已采纳

2回答

如何在JavaScript中设置CSS渐变背景？

、

CSS渐变被描述为，但我不知道如何在JavaScript中选择这些属性。如果可能的话，我宁愿不使用jQuery。编辑:仅执行以下操作似乎不起作用...document.getElementById("selected-tab").style.background = "-moz-linear-gradient(#b

浏览 0提问于2012-06-24得票数 0

回答已采纳

3回答