Кодирование атрибутов стиля класса специальными символами - PullRequest
Новая
       10

Кодирование атрибутов стиля класса специальными символами

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

Я пытаюсь заполнить два элемента SVG с атрибутами стиля. Один с strokedashoffset, а другой с transform: rotate. Это мой ожидаемый css: 

<circle class="progressbar-line-timer" id="timerOffset" 
style="strokedashoffset: 76.1942px;" r="48.5" cx="50" cy ="50" 
/>

<circle class="progressbar-marker-timer" id="timerRotate"  
style="transform: rotate(270deg);" r="6" cx="50" cy="1.5" />

Я создал функцию для вычисления этих двух значений.

Я пытаюсь использовать getElementById () для заполнения значений. Я назначил идентификаторы для элементов SVG. 

<circle class="progressbar-line-timer" id="timerOffset" 
r="48.5" cx="50" cy ="50" />
<circle class="progressbar-marker-timer" id="timerRotate"  
r="6" cx="50" cy="1.5" />

Поскольку у этих атрибутов стиля есть специальные символы - тире, двоеточия и парены, я использую encodeURI для кодирования строки, поскольку я прочитал, что она может обрабатывать специальные символы.

Я не могу получить правильные значения для правильного кодирования. Я получаю эту ошибку в заявлении document.getElementById ("timerOffset"): 

VM88:31 Uncaught TypeError: Cannot read property 'style' of 
null
    at <anonymous>:31:47
(anonymous) @ VM88:31

Вот мой код JavaScript: 

    //calculated values rotateTimer 
    //                  offsetTimer 

    // using escape to recognize the double quotes
    timerURIComprotateHold = ('\"stroke-dashoffset: '+rotateTimer+'\"')
    var timerURIComprotate = encodeURI(timerURIComprotateHold);
    console.log('timerURIComprotate '+timerURIComprotate );

    // erroring on this statement        

document.getElementById("timerOffset").style.timerURIComprotate;  


    // calculated value of timerURIComprotate %22stroke-dashoffset:%20125.99999999999999px;%22

Разве не 22% кавычек и% 20 пробел, и не должно ли это работать?

Я тоже попробовал кодировать URIComponent, но безуспешно. Есть ли другой способ кодирования, который я могу попробовать? Кодировка должна быть в том числе и с паренами, поскольку они находятся в атрибутах стиля второго элемента, который я хочу стилизовать.

Спасибо за вашу помощь.

1 Ответ

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

Если ваш JavaScript не получает элемент по его идентификатору, возможно, ваш JavaScript загружается до того, как элемент был отрендерен. То есть: во время работы вашего JavaScript браузер не «знает» об элементах <circle>.

Веб-браузеры выполняют ваш код построчно, начиная сверху вниз и слева направо от написанного вами кода, поэтому, если ваш JavaScript находится в теге <script> в строке 5 вашего HTML и ваш элемент <circle> находится в строке 32, ваш веб-браузер запустит JavaScript до того, как прочитает HTML <circle>. Вот почему он говорит, что не может изменить style «ноль» - он пытается изменить то, что еще не существует.

Чтобы предотвратить это, вы должны указать браузеру не запускать JavaScript, пока содержимое DOM - все элементы HTML - не загрузятся. Обычно это делается одним из двух способов:

  • window.addEventListener('DOMContentLoaded') (см. Примеры на https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded), или
  • Помещение вашего JavaScript в <script> тег после остальной части вашего HTML, обычно прямо перед закрывающим тегом </body>.
...