Javascript 使用JQuery动态更改文本大小_Javascript_Jquery_Html_Css

Javascript 使用JQuery动态更改文本大小

javascript jquery html css

Javascript 使用JQuery动态更改文本大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的index.html，包含3个部分，使用JQuery，如何根据按钮ZOOM+和ZOOM-将标记中的文本放大或缩小，只有3个级别以下是index.html： <html> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery.js"></script> <script> $(

我有一个简单的index.html，包含3个部分，使用JQuery，如何根据按钮

ZOOM+

和

ZOOM-

将


标记中的文本放大或缩小，只有3个级别
以下是index.html：
<html>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="jquery.js"></script>
        <script>
        $(document).ready(
            function  ()
            {
                var text = $('#d3').children('p').text();

                    $("#d1").click(function() {
                        $("#d2").show();            
                    });

                   $("#btn1").click(function() { 

                    });

    });
        </script>
</head>
<body>
    <div id="d1">
        En cliquant ici le slide va descendre ou remonter.
    </div>
    <div id="d2" hidden  >
        <div id="d3">
        <p>HELLO</p> 

        </div>
    <button type="button" id="btn1">ZOOM+</button>
    <button type="button" id="btn2">ZOOM-</button>
    </div>
</body>
</html>

一个可能的解决方案可以是：

var initialSize=“16px”；
$（函数（）{
var text=$（'#d3'）.children（'p'）.text（）；
var obj=$（'p'）；
var initialSize=parseInt（obj.css（'font-size'））+'px'；
$（“#d1”）。单击（函数（）{
$（“#d2”）.show（）；
});
$（“#btn1”）。单击（函数（）{
var obj=$（'p'）；
var fontSize=parseInt（obj.css（'font-size'））+1；
css（'font-size'，fontSize+'px'）；
});
$（“#btn2”）。单击（函数（）{
var obj=$（'p'）；
var fontSize=parseInt（obj.css（'font-size'））-1；
css（'font-size'，fontSize+'px'）；
});
$（“#btn3”）。单击（函数（）{
$（'p'）.css（'font-size'，initialSize）；
});
});
#d1{
宽度：600px；
背景色：#e5eecc；
边框样式：实心；
边框：1px 1px 1px 1px；
左侧填充：40px；
右边填充：40px；
}
#d2{
高度：160px；
宽度：600px；
背景色：#e5eecc；
边框样式：实心；
边框：1px 1px 1px 1px；
左侧填充：40px；
右边填充：40px；
}
#d3{
高度：100px；
寡妇：200px；
背景色：#98bf21；
位置：绝对位置；
}
#btn1{
显示：内联块；
左边距：140像素；
}

在斜坡上，滑下你的心。
你好
变焦+
变焦-
变焦复位
使用window.getComputedStyle获取段落属性
以下是一个解决方案：

$（文档）。准备好了吗(
函数（）
{
var paragraphElement=$（'#d3'）。children（'p'）；
console.log（paragraphElement.length）；
$（“#d1”）。单击（函数（）{
$（“#d2”）.show（）；
});
$（“#btn1”）。单击（函数（）{
对于（var i=0；i谢谢！当我单击“缩放”或“缩放+缩放”时是否可能返回到初始状态？@Hadh我更新了片段，添加了重置缩放。你接受我的回答吗？不多，但@gaemaf解决了它，谢谢你的时间！
#d1
{
    width: 600px;
    background-color: #e5eecc;
    border-style: solid;
    border: 1px 1px 1px 1px;
    padding-left: 40px;
    padding-right: 40px;

}

#d2
{
    height: 160px;
    width: 600px;
    background-color: #e5eecc;
    border-style: solid;
    border: 1px 1px 1px 1px;
    padding-left: 40px;
    padding-right: 40px;
}

#d3
{
    height: 100px;
    widows: 200px;
    background-color: #98bf21;
    position: absolute; 
}

#btn1
{
    display: inline-block;
    margin-left: 140px;
}