Question

我尝试用样式属性填充两个svg元素。一个带有strokedashoffset，另一个带有transform：旋转。这是我期望的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，但是没有运气。我可以尝试使用另一种编码方法吗？编码也需要处理parens，因为它们位于我要设置样式的第二个元素的样式属性中。

感谢您的帮助。

Answer 1

如果您的JavaScript未能通过其ID成功获取元素，则可能是在呈现元素之前已加载JavaScript。也就是说：在运行JavaScript时，浏览器不会“了解” <circle>元素。

Web浏览器逐行执行您的代码，从您编写的代码的顶部到底部和从左到右，因此如果您的JavaScript位于第5行的<script>标记中您的HTML，而您的<circle>元素位于第32行，则您的网络浏览器将在读取<circle> HTML之前运行JavaScript。这就是为什么它不能修改style“ of null”的原因-它正在尝试修改尚不存在的内容。

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

window.addEventListener('DOMContentLoaded')（请参见https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded上的示例），或
将JavaScript放在其余HTML的<script>标签中之后，通常紧接在结束</body>标签之前。

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

1 个答案: