Как получить доступ к переменной JavaScript в разделе «Цвет» HTML-кода? - PullRequest
Новая
       7

Как получить доступ к переменной JavaScript в разделе «Цвет» HTML-кода?

0 голосов
/ 19 ноября 2018

Я хотел бы получить доступ к переменной "theSkyColour" внутри HTML-кода ниже, как показано.Могу ли я узнать, как получить к нему доступ, как показано на рисунке?

Ниже приведен код, который я написал: 

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 в HTML , однако он не работал для меня, так как яЯ не могу изменить цвет неба на странице просмотра.

Я создал следующие HTML-страницы.1. Страница настроек для настройки цвета неба, сохраненного в локальном хранилище как «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

Что я хочу и что у меня есть

Ответы [ 3 ]

0 голосов
/ 19 ноября 2018

Если вы не используете фреймворк, такой как 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>
0 голосов
/ 19 ноября 2018

проверить фрагменты для получения и установки атрибутов в компоненте a-frame. Обратитесь к следующей документации:

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

Это очень хорошо объясняет, как получить и как установить значения из свойств и вложенных свойств компонента:

Получить недвижимость

enter image description here

Задать свойство enter image description here

0 голосов
/ 19 ноября 2018

Вы не можете, но вы можете изменить функцию для обновления цвета неба. 

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