Блог

Главная - Вопросы по программированию - Изменение: корневая переменная с помощью Javascript или jQuery динамически

Изменение: корневая переменная с помощью Javascript или jQuery динамически

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Моя цель — использовать динамически вычисляемое расстояние от li.ecs-event:nth-child(1) до вершины для свойства top в классе btn-1 через :root . Функция getposition должна работать, не совсем уверен, где я сошел с пути в остальных.

CSS:

 :root {
  --mouse-x: 0vw;
  --mouse-y: 0vh;
}

.btn-1 {
  top: var(--mouse-y);
}

Javascript:

 var element = document.querySelector('li.ecs-event:nth-child(1)');
    
var r = document.querySelector(':root');

function getPosition(element) {

    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition  = (element.offsetLeft - element.scrollLeft   element.clientLeft);
        yPosition  = (element.offsetTop - element.scrollTop   element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };

}

function myFunction_set() {
    r.style.setProperty('--mouse-x', xPosition   "vw");
    r.style.setProperty('--mouse-y', yPosition   "vh");
}

Комментарии:

1. Пожалуйста, сообщите нам, каков ожидаемый результат и в чем ваша ошибка.

2. Если дочерний элемент добавляется в список, «li.ecs-event: n-й дочерний элемент (1)» является первым дочерним элементом, «li.ecs-event: n-й дочерний элемент (1)» расстояние до вершины уменьшается. В этом случае значение «top: var(—mouse-y)» должно измениться соответствующим образом. Другими словами, я пытаюсь получить изменения в выводе функции GetPosition() и соответствующим образом изменить свойство top класса btn-1. Насколько я понимаю, это можно сделать с помощью :root . Я не получаю никаких ошибок, проблема только в том, что значение верхнего свойства не меняется

3. Правильно ли я понимаю концепцию манипулирования CSS в этом случае или это просто сложно сделать?

Метки: