动态改变尺寸、款式

Question

如何动态更改字段大小？
我有一个选择字段，有 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>

Answer 1

抱歉，我一定误解了你的问题。

那么您想根据文本区域的内容动态调整文本区域的大小吗？您可以使用 jQuery autoResize 插件来实现此目的...

Answer 2

一个快速的 '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');
 }
});

当然，这段代码不是很 DRY。此外，通过 JavaScript 修改 CSS 属性从来都不是一个好主意 - 最好通过 JS 动态添加类并在 CSS 文件中指定实际的 CSS（废话）。

Answer 3

例如：

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

Answer 4

首先，我认为有更多的开发人员可以提供帮助；无论如何，这就是答案

首先创建一个计算strlen的函数

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

第二个创建一个var 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";