使用 JQuery 动态更改文本大小

Dynamically change Text size with JQuery

本文关键字：文本 JQuery 动态使用更新时间：2023-09-26

我有一个简单的索引.html包含 3 个分区，使用 JQuery，如何使用 <p> </p> 标签内的文本根据按钮放大或缩小 ZOOM+ 和 ZOOM- 只有 3 个级别？

这是索引.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>

风格.css ：

#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;
}

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

var initialSize = "16px";
$(function () {
  var text = $('#d3').children('p').text();
    var obj = $('p');
    var initialSize = parseInt(obj.css('font-size')) + 'px';
  $("#d1").click(function () {
    $("#d2").show();
  });
  $("#btn1").click(function () {
    var obj = $('p');
    var fontSize = parseInt(obj.css('font-size')) + 1;
    obj.css('font-size', fontSize + 'px');
  });
  $("#btn2").click(function () {
    var obj = $('p');
    var fontSize = parseInt(obj.css('font-size')) - 1;
    obj.css('font-size', fontSize + 'px');
  });
  $("#btn3").click(function () {
    $('p').css('font-size', initialSize);
  });
});

#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;
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<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>
    <button type="button" id="btn3">ZOOM Reset</button>
</div>

使用 window.getComputedStyle 获取段落属性这是一个解决方案：

$(document).ready(
  function  ()
  {
    var paragraphElement = $('#d3').children('p');
    console.log(paragraphElement.length);
    $("#d1").click(function() {
      $("#d2").show();            
    });
    $("#btn1").click(function() {
      for(var i=0;i<paragraphElement.length;i++){
        var p= paragraphElement[i];
        var style = window.getComputedStyle(p, null).getPropertyValue('font-size');
        var fontSize = parseFloat(style); 
        p.style.fontSize = (fontSize + 1) + 'px';
      };
      
    });
    $("#btn2").click(function() { 
      for(var i=0;i<paragraphElement.length;i++){
        var p= paragraphElement[i];
        var style = window.getComputedStyle(p, null).getPropertyValue('font-size');
        var fontSize = parseFloat(style); 
        if(fontSize>2)
           p.style.fontSize = (fontSize - 1) + 'px';
      };
    });
  });

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  En cliquant ici le slide va descendre ou remonter.
</div>
<div id="d2" hidden  >
  <div id="d3">
    <p>HELLO</p> 
    <p> another parapgraph</p>
  </div>
  <button type="button" id="btn1">ZOOM+</button>
  <button type="button" id="btn2">ZOOM-</button>
</div>