Question

我正在为视障人士做一个网站。我有三个按钮：

增加字体
缩小字体
在正常模式下

我需要点击为+2添加font-size的{{1}}像素。请帮助我如何在javascript中实现它。

Answer 1

<强> JQUERY

 size=parseInt($('p').css('font-size'));


    $("#big").on("click",function(){

      size=size+2;
       $("p").css("font-size",size + "px");
    });
    $("#normal").on("click",function(){
      size=14;
       $("p").css("font-size",size + "px");
    });
    $("#small").on("click",function(){
      size=size-2;
       $("p").css("font-size",size+ "px");
    });

<强> HTML

 <p>CLICK ME!</p>
  <button id='big'>BIG</button>
  <button id='normal'>NORMAL</button>
  <button id='small'>SMALL</button>

链接 JSBIN

Answer 2

实际上并不难，

CSS：

// Set all inherited fonts to
body.impaired-view, body.impaired-view * {
    font-size: 150%;
}

JavaScript的：

// Add the class 'impaired-view' to the body
function enlargeFont() {
    var body = document.querySelector('body');
    body.classList.add('impaired-view');
}

// Remove if not longer necceary
function shrinkFont() {
    var body = document.querySelector('body');
    body.classList.remove('impaired-view');
}

Answer 3

document.getElementById("yourElement").style.fontSize = yourValue;

Answer 4

HTML，CSS和jQuery：

$sql1 = "SELECT * FROM ExampleTable1 E1
            LEFT JOIN ExampleTable2 E2 ON E1.id = E2.beid";

$result1 = mysqli_query($conn, $sql1); 

if (mysqli_num_rows($result1) > 0) { 
    while($row1 = mysqli_fetch_assoc($result1)) {
        echo $row1['vtname']; 
    }
}

var size = 18; // or any default number yo want
$(document).ready(function() {
  $("#bigger").click(function() {
    $("p").css("font-size", size + 1 + "px");
    size++;
  });
  $("#smaller").click(function() {
    $("p").css("font-size", size - 1 + "px");
    size--;
  });
  $("#moreBigger").click(function() {
    $("p").css("font-size", size + 2 + "px");
    size+=2;
  });
});

p {
  font-size: 18px
}
// or any default number you want

Answer 5

您可以使用jsfiddle中的示例代码。它选择具有一个类的所有元素（您可以将其更改为您想要的任何元素），确定当前字体大小并为所有这些元素指定更大/更小/默认的字体。代码示例：

$(document).ready(function() {
  $("#increaseBtn").click(function() {
    var textBoxes = $('.textClass');
    var fontSize = getCurrentFontSize(textBoxes);
    textBoxes.css("font-size", fontSize + 2);
  });
  
  $("#decreaseBtn").click(function() {
  	var textBoxes = $('.textClass');
  	var fontSize = getCurrentFontSize(textBoxes);
    textBoxes.css("font-size", fontSize - 2);
  });
  
  $("#defaultBtn").click(function() {
  	$('.textClass').css("font-size", 12);
  });
});

function getCurrentFontSize(textBoxes) {
  var fontSize = textBoxes.eq(0).css("font-size");
  return parseInt(fontSize, 10);
}

.textClass {
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="textClass">Text1</div>
<div class="textClass">Text2</div>

<input type="button" id="increaseBtn" value="Incrase text size">
<input type="button" id="decreaseBtn" value="Decrease text size">
<input type="button" id="defaultBtn" value="Default text size">

如何使用jquery增加/减少点击事件的元素字体大小？

5 个答案: