如何在 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。（见附件截图）

Failed display of desired colors RGB 41 35 71

What I want and What I have

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 或对象来设置和获取天空属性

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)',
            }
        }
        */
    }
}

Answer 2

除非您使用 Angular 或 django 之类的框架，否则无法在您的 HTML 代码中访问变量，相反您可以在 Javascript 中构造属性，并且将其添加到元素中。

EX:

var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)

更新：不使用 jQuery：

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

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

</script>

Answer 3

查看在 a 型框架组件中获取和设置属性的代码片段。请参阅以下文档：

https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname

它很好地解释了如何从组件属性和子属性中获取和设置值：

获取属性

设置属性

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

How do I access JavaScript variable under Color portion of HTML code?

html

javascript

variables

web-component

aframe