html js控制字体大小 使之在div中正常显示

(1)

在做数据统计时候遇到的问题,我的div的宽度与随着窗体成正比关系,所以我就不能把div中的字体大小写死,必须在js中进行计算。相同宽度的div中写多个不同数据,只能以字数最后的位基础计算。


(2) html代码如下。
    <div class="StatRightCH">
        <div class="StatRightParent"  id="func_Three" > 
            <span class="StatRightSon" id="func_textThree">Species:15</span>
        </div>
        
        <div class="StatRightParent" > 
            <span class="StatRightSon" id="func_textFour">ncRNA:1336</span>
        </div>
        
        <div class="StatRightParent" > 
            <span class="StatRightSon" id="func_textFive">Immune Cell:31</span>
        </div>
        
        <div class="StatRightParent" >  
            <span class="StatRightSon" id="func_textSix">Immune Function:47</span>
        </div>                    
    </div>
(3) 代码如下。
    function funcDiv()
    {
        resetFuncSideFontSize("func_textSix" , document.getElementById("func_Three").clientWidth - 15 , 5,50);
    }
    
    function resetFuncSideFontSize(name, maxWidth, minSize, maxSize)
    {
        var divWord = document.getElementById(name);
        divWord.style.fontSize = minSize + 'px';
        for (var i = minSize; i < maxSize; i++) 
        {
            if (divWord.clientWidth > maxWidth) 
            {
                divWord.style.fontSize = (i - 1) + 'px';
                funcStep = (i - 1);
                break;
            } 
            else 
            {
                divWord.style.fontSize = (i) + 'px';
                funcStep = (i);
            }
        }
        
        divWord.style.top = 30 + '%';
        
         //第一个
        var divThree = document.getElementById("func_textThree");
        divThree.style.fontSize = funcStep + 'px';
        divThree.style.top = 30 + '%';
        
        
        //第二个
        var divFour = document.getElementById("func_textFour");
        divFour.style.fontSize = funcStep + 'px';
        divFour.style.top = 30 + '%';
        
        //第三个
        var divFive = document.getElementById("func_textFive");
        divFive.style.fontSize = funcStep + 'px';
        divFive.style.top = 30 + '%';
    };
    
(4) css 代码。
    .StatRightParent
    {
        height:40px;
        width:100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .StatRightSon
    {
        font-size: 5px;
        margin-left:5px;
        margin-right:5px;
        white-space: nowrap;
        position: relative;
        float:left;
    }
(5) 效果图


效果图

您可以使用CSS预处理器(如LESS、Sass)或JavaScript框架(如React、Vue)来实现按钮控制全局字体大小的功能。 使用CSS预处理器,您可以定义一个变量来保存全局字体大小,然后在样式使用该变量。然后,使用JavaScript来监听按钮点击事件,并修改该变量的值,从而实现控制全局字体大小的功能。 以下是使用LESS实现的示例代码: ```less // 定义全局字体大小变量 @global-font-size: 16px; // 根据全局字体大小变量设置样式 body { font-size: @global-font-size; } h1 { font-size: @global-font-size * 2; } // 监听按钮点击事件,修改全局字体大小变量 $('#increase-font-size').click(() => { @global-font-size: @global-font-size + 2px; }); $('#decrease-font-size').click(() => { @global-font-size: @global-font-size - 2px; }); ``` 使用React或Vue框架,您可以定义一个全局状态来保存字体大小,并将其传递给需要修改字体大小的组件。然后,在按钮点击事件更新全局状态的值,从而实现控制全局字体大小的功能。 以下是使用React实现的示例代码: ```jsx // 定义全局状态 const [globalFontSize, setGlobalFontSize] = useState(16); // 在组件使用全局状态 function App() { return ( <div style={{ fontSize: globalFontSize }}> <h1 style={{ fontSize: globalFontSize * 2 }}>Hello World</h1> <Button onClick={() => setGlobalFontSize(globalFontSize + 2)}>Increase Font Size</Button> <Button onClick={() => setGlobalFontSize(globalFontSize - 2)}>Decrease Font Size</Button> </div> ); } ``` 使用Vue实现的示例代码: ```html <!-- 定义全局状态 --> <template> <div :style="{ fontSize: globalFontSize + 'px' }"> <h1 :style="{ fontSize: globalFontSize * 2 + 'px' }">Hello World</h1> <button @click="increaseFontSize">Increase Font Size</button> <button @click="decreaseFontSize">Decrease Font Size</button> </div> </template> <script> export default { data() { return { globalFontSize: 16 }; }, methods: { increaseFontSize() { this.globalFontSize += 2; }, decreaseFontSize() { this.globalFontSize -= 2; } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值