javascript - 如何访问 HTML 代码颜色部分下的 JavaScript 变量？

Question

我想访问下面 HTML 代码中的变量“theSkyColour”，如下所示。我可以知道如何访问它，如图所示？

以下是我编写的代码：

function getSkyColour() {
  var theSkyColour = localStorage.getItem('skySet[enter image description here][1]ting');
}

<a-sky id="skyColor" src="#sky" 
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>

我已经查看了其他答案，例如此处的答案：Javascript variable access in HTML，但是，它对我不起作用，因为我无法在查看页面中更改天空的颜色。

我创建了以下 HTML 页面。1.一个设置页面，用于调整保存在localStorage中的天空颜色为“skyColor”。2. 用户查看天空颜色的查看页面。

我有 a-sky 标签的原因是我使用的是 aframe.io

更新：尝试将 JavaScript 与 localStorage 会话一起使用后：

Javascript代码：

<script>
function getSkyColor() {
  var theSkyColor = localStorage.getItem('skySetting');
}
getSkyColour()

var myAttr = "shader:gradient; topColor:"+theSkyColor+"; 
bottomColor:"+theSkyColor+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>

HTML 代码：

  <a-sky id="skyColor" src="#sky" material="shader:gradient; offset:0;"></a-sky>

不幸的是，它仍然不起作用，因为我得到的显示不是我所期望的，它是 RGB 颜色下的夜空：41 35 71。（见附件截图）

无法显示所需颜色 RGB 41 35 71

我想要什么和我拥有什么

标签： javascripthtmlvariablesweb-componentaframe

Answer 1

你不能，但你可以改变函数来更新天空的颜色。

document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;

更新

let setSkyColor = (val) => {
    localStorage.setItem('skyColor', `defaultStylesInHere topColor:${val};bottomColor:${val}`);
}
let loadSkyColor = () => {
    document.getElementById('skyColor').attributes.material = localStorage.getItem('skyColor');
}

我可以制作完整的功能，但应该没有必要
您也可以使用 JSON 或 Objects 来设置和抓取天空属性

let app = {
    skyProp: {
        /*
        color: 'rgba(200, 200, 255, 1)',
        OR
        color: {
            default: {
                color: 'rgba(200, 200, 255, 1)',
                topColor: 'green',
            },
            night: {
                color: 'rgba(255, 255, 255, 1)',
                bottomColor: 'rgba(155, 155, 155, 1)',
            }
        }
        */
    }
}