时间戳

首页 > 解决方案 > 用特殊字符编码类样式属性

javascript - 用特殊字符编码类样式属性

问题描述

我试图用样式属性填充两个 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 元素分配了一个 ID。

<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 不是空格吗？这不应该吗？

我也尝试过 encodeURIComponent ，但没有运气。我可以尝试另一种编码方法吗？编码也需要处理括号，因为它们位于我要设置样式的第二个元素的样式属性中。

谢谢您的帮助。

标签： javascriptcssencodinggetelementbyid

解决方案

如果您的 JavaScript 没有通过其 ID 成功获取元素，则可能是您的 JavaScript 在元素被渲染之前被加载。也就是说：在你的 JavaScript 运行时，浏览器并不“知道”这些<circle>元素。

Web 浏览器逐行执行您的代码，从上到下和从左到右执行您编写的代码，所以如果您的 JavaScript 在<script>HTML 的第 5 行的标记中，并且您的<circle>元素在第 32 行，您的 Web 浏览器将在读取 HTML 之前运行 JavaScript <circle>。这就是为什么它说它不能修改style“null”——它试图修改一些尚不存在的东西。

为了防止这种情况，您需要告诉浏览器在 DOM 的内容（所有 HTML 元素）加载之前不要运行 JavaScript。这通常通过以下两种方式之一完成：

推荐阅读