사용자 입력에서 요소에 스타일 추가

Question

사용자가 선택한 번호를 입력하고 미리보기 코드에 번호를 삽입하는 기본 반경 용 생성기가 있습니다. 그러나 삽입 한 번호에 따라 변경되는 미리보기 상자가 필요합니다. 나는 거기에 반 길이지만 마지막 비트를 알아내는 것처럼 보일 수 없다.

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> 

자바 스크립트 :이다

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과 동일 할 말합니다.

아이디어가 있으십니까?

Answer 1

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

우리는 단순히 jj_input의 그것과 element.style.borderRadius의 값을 할당하고 px에 합치하고 있습니다.