[英]Add style to element from user input
我有一個基本的邊界半徑生成器,用戶可以在其中輸入自己選擇的數字,然后將數字插入預覽代碼中。 但是我想有一個預覽框,該框根據插入的數量而變化。 我在一半的地方,但似乎無法弄清楚最后一點。
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
串聯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.