Динамическое изменение размера, стиля

Как я могу изменить размер поля диинамически?
У меня есть поле выбора, и есть 3 варианта с различными значениями. Так что если пользователь выбирает один из них в поле вы видите значения. Но как я могу изменить размер, который значения из поля опции помещаются в 

function changeText()
        {

            var select       = document.getElementById("surl");
            var textfield    = document.getElementById("turl");
            var bold         = document.getElementById("burl");
            var link         = document.getElementById("linkText");

            if(bold.style.display == "none")
                bold.style.display = "";
           //if(link.innerHtml)

            bold.innerHtml   = select.value;
            //if(link.innerHTML !="")
               link.innerHTML= select.value;
            textfield.value  = select.value;

        }


<b>Sample: </b><select id="surl" onchange="changeText();" style="visibility: visible;" name="linkText">
         <option>Select LinkText</option>
         <option value="<a href='http://www.doesntexist.dsdsd/'>Want sign? http://www.doesntexist.dsdsd</a>">
            Variant1 
         </option>
          <option value="<a href='http://www.doesntexist.dsdsd/'>Wanna killme? http://www.doesntexist.dsdsd</a>">
            Variant 2
         </option>


     </select>
     <br />
    <div class="succes">
     <span id="burl" style="display: none"><br /><a id="linkText" href="http://www.doesntexist/"></a></span>
     </div>
     </p>
     <p>

         <textarea  id="turl" style="">
        <a  href="http://www.doesntexist">text...</a>
      </textarea>
     </p>
4 2
javascript html coding-style textarea

4 ответа:

Извините, я, должно быть, неправильно понял вашу проблему.

Итак, вы хотите изменить размер текстовой области динамически на основе чего, ее содержимого? Вы можете использовать jQuery autoresize plugin для этого ...

1

Быстрое ' N ' грязное решение jQuery было бы следующим: 

$('input#foo-option-1').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '150px');
 }
});

$('input#foo-option-2').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '250px');
 }
});

$('input#foo-option-3').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '350px');
 }
});

Конечно, этот код не очень сухой. Кроме того, изменение свойств CSS через JavaScript никогда не является очень хорошей идеей - лучше добавлять классы динамически через JS и указывать фактический CSS в ваших CSS-файлах (duh).

1

Например: 

<script type="text/javascript">
document.getElementById("textarea_id").style.width = "300px";
document.getElementById("textarea_id").style.width = "200px";
</script>
0

Во-первых, я думал, что есть больше разработчиков, которые могут помочь; в любом случае здесь есть ответ

Сначала создайте функцию, которая вычисляет strlen 

function strlen(strVar)
{
   return(strVar.length)
}

Второй создать tfcount ВАР 

var tfcount      = strlen(select.value);

И наконец 

textfield.style.width   =  tfcount < 110 ? tfcount = 110 : 3.5*tfcount+"px";
textfield.style.height  =  tfcount < 110 ? tfcount = 110 : tfcount/2.5+"px";
0