css 每次按下按钮时减小字体大小的jquery函数

u5i3ibmn  于 2023-02-10  发布在  jQuery
关注(0)|答案(3)|浏览(152)

请帮帮我。

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>

我希望每次按下按钮时字体大小会减小。但是,它只会增大。不仅如此,每次按下按钮时字体大小都会增大5或7点。

zour9fqk

zour9fqk1#

使用这个:它容易
jquery中应使用运算符+=*=-=/=

function fontDown() {
  $('.box')
    .css('font-size', '-=1pt')
    .css('line-height', '-=1pt');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>
tcbh2hod

tcbh2hod2#

.css('font-size')返回类似18.6667px的字符串,它是px值,而不是pt
将代码更改为使用px将根据需要减小大小。

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "px").css('line-height', curSize + "px");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>

<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>
yhxst69z

yhxst69z3#

你需要做一个像素到点的单位转换。
px与pt的比例是4/3,所以即使你把它减少一,你也会得到一个以px为单位的更大的值,然后你给这个最大的值分配一个pt单位,这每次都会产生一个最大的字体大小。

function fontDown()
  {
  let curSize = Math.round( (parseFloat($('.box').css('font-size')) *3) / 4); 
                // px to pt converssion
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>

<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>

相关问题