动态调整按钮大小

Resize button size dynamically

本文关键字：按钮 调整 动态      更新时间：2023-09-26

这是我的JsFiddle代码。现在我的按钮大小是定义的，但我想根据文本动态调整按钮的大小。我应该怎么做才能动态调整按钮的大小?我想通过javascript

 <div id="wrapper">
        <div id="mainContainer">
            <p class="copyrights" id="copyrights"></p>
            <div>
                <img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
            </div>
                  <div id="headlineText">
            <p id="headline1Txt" >Sample bag1</p>
            <p id="headline2Txt" >Sale Price $25</p>
            <p id="headline3Txt" >Sale $14<p>
        </div>
            <div id="disclaimer" >
               Details*
            </div>
              <div id="Image_logo">
                <img id="Imglogo" src="http://i.share.pho.to/e114a8e1_c.png" />
            </div>
           <div >
           <button class="btn btn-primary" type="button"  id="ctaBtn"><div id="fadeIn" >  Learn More Now </div></button>
        </div>
    </div>
    </div>

你可以使用检查系统来检查窗口大小，然后根据你的想法设置按钮的宽度和高度。对于检查窗口大小你可以输入这段代码然后添加/sub/div这个值根据你的按钮大小。

 function widthheight()
    {
    var w=window.outerWidth;
    var h=window.outerHeight;
    var button="Window size: width=" + w + ", height=" + h;
    document.getElementById("demo").innerHTML=txt;
    }

可能是我的主意帮助你由于

不要在CSS中设置按钮的width属性。它会自动调整大小以适合您的文本。

此处更新小提琴

相关文章：