javascript - 仅在应用程序中动态更改特定字体大小

Question

我正在用 asp.net C# 创建一个网络应用，

我有 50/60 页，其中 4/5 母版页工作正常，但现在我想让我的用户为特定区域设置字体大小

就像我有这些 div 一样

<div>
   <label>this label has 14 as font color</label>
</div>

<div>
   <label>this label has 18 as font color</label>
</div>

<div>
   <label>this label has 22 as font color</label>
</div>

<div>
   <label>this label has 8 as font color</label>
</div>

现在我只想更改字体大小为 14 的 div 的字体大小，

我无法区分所有 div，我知道的唯一信息是我想动态更改字体大小为 14 的 div，

我将使用 javascript 和 jquery 来更改那些 div 的字体大小

下面是我的做法，

$('div label').css({ 'font-size': window.getComputedStyle(document.body).getPropertyValue('font-size') });

但这会改变所有 div 的字体大小，我只想将 div 的字体大小更改为 14px 作为字体大小，

我怎样才能做到这一点？

Answer 1

你必须循环所有的 label 并检查 font-size 是否为 14px

$('div label').each(function() {
if($(this).css('font-size')=='14px')
{ 
  $(this).css({ 'font-size': window.getComputedStyle(document.body).getPropertyValue('font-size') })
}
});

.fz-14{
font-size:14px;
}
.fz-18{
font-size:18px;
}
.fz-22{
font-size:22px;
}
.fz-8{
font-size:8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <label class="fz-14">this label has 14 as font color</label>
</div>

<div>
   <label class="fz-18">this label has 18 as font color</label>
</div>

<div>
   <label class="fz-22">this label has 22 as font color</label>
</div>

<div class="fz-8">
   <label>this label has 8 as font color</label>
</div>