从用户输入向元素添加样式

Add style to element from user input

本文关键字：添加 样式 元素 用户 输入      更新时间：2023-09-26

我有一个基本的边框半径生成器，用户在其中输入他们选择的数字，并将数字插入预览代码中。但是，我想要一个预览框，该预览框会根据他们插入的数字而变化。我已经走到了一半，但似乎无法弄清楚最后一点。

.HTML：

<label>Border Radius:</label>
<input name="border-radius" id="jj_input" class="jj_input" type="text" size="2" value='' onkeyup='changeRadius()' />
<span>px</span>
<div class="yourcode">
    <p>border-radius: <span id="radius"></span>px; </p>
    <p>webkit-border-radius: <span id="radius2"></span>px; </p>
</div>
<div id="preview">
    <span class="preview_text">Preview Text</span>
</div>

Javascript：

function changeRadius(){
    var jj_input = document.getElementById('jj_input').value;
    document.getElementById('radius').innerHTML = jj_input;
    document.getElementById('radius2').innerHTML = jj_input;
    document.getElementById('preview').style.borderRadius = 'WHAT_GOES_HERE?' ;
}

哪里说"WHAT_GOES_HERE？"，我希望这个值与jj_input相同。

有什么想法吗？

document.getElementById('preview').style.borderRadius = jj_input + 'px';

我们只是将 element.style.borderRadius 的值分配给 jj_input 的值，并在 px 中连接。

相关文章：