仅在应用程序中动态更改特定的字体大小答案

【问题标题】：only change particular font-size dynamically in the application仅在应用程序中动态更改特定的字体大小
【发布时间】：2018-12-04 06:47:47
【问题描述】：

我正在用 asp.net C# 创建一个 Web 应用程序，

我有 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，

我怎样才能做到这一点？

【问题讨论】：

您需要一些东西来唯一标识每个标签的每种字体我建议您使用类或属性
@madalinivascu 是的，我也这么认为，但是应用程序非常庞大，很难在整个应用程序中更改特定的字体大小
可以添加css类吗？
不，我不能，因为应用程序非常庞大，如果可以，我不需要在这里提问
你怎么知道哪个元素有哪个字体？

标签： javascript jquery css fonts

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用each() 循环所有标签以检查字体大小 并在需要时设置属性：

$('div label').each(function(i, el){
  var fSize=window.getComputedStyle(el.parentNode).getPropertyValue('font-size');
  if(fSize == '14px')
    $(el).parent().css({ 'font-size': window.getComputedStyle(document.body).getPropertyValue('font-size') });
});
console.log($('div').eq(1).css('font-size')); //16px
console.log($('div').eq(3).css('font-size')); //16px

div{
  font-size: 20px;
}

div:nth-of-type(2n){
  font-size: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案3】：

你必须遍历所有的 div。 "$('div label')" 这总是指向第一个元素。我已链接供您参考。

$("div").each(function(){
  var fontSize = $(this).find('label').css("font-size");
  console.log("size", fontSize);
  if(fontSize <= "14px"){
     // your code
  }
});

jsfiddle

【讨论】：