Question

我有一个包含3个分区的简单index.html，使用JQuery，如何根据按钮<p> </p>和{{1}将ZOOM+标记内的文本设置为ZOOM IN或OUT只有3个级别？

这是index.html：

ZOOM-

style.css：

<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>

Answer 1

可能的解决方案是：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

$(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';
      };
    });

  });

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JQuery动态更改文本大小

2 个答案: