Динамически изменять только определенный размер шрифта в приложении
Я создаю веб-приложение на 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>
теперь я просто хочу изменить размер шрифта div, у которого 14 как размер шрифта,
и я не могу различать все div, единственная информация, которую я знаю, это то, что я хочу динамически изменять размер шрифта div, у которого 14 как font-size,
Я буду использовать javascript и jquery, чтобы изменить размер шрифта этих div
Ниже показано, как именно я это сделал,
$('div label').css({ 'font-size': window.getComputedStyle(document.body).getPropertyValue('font-size') });
но это изменяет размер шрифта всего div, и я просто хочу изменить размер шрифта div на 14 пикселей в качестве размера шрифта,
как я могу этого добиться?
@madalinivascu да, я думаю то же самое, но приложение очень обширное, будет очень сложно изменить конкретный размер шрифта во всем приложении
Можете ли вы добавить классы css?
нет, я не могу, потому что приложение очень обширное, Если бы я мог, мне не нужно было бы здесь задавать вопросы
как узнать, у какого элемента какой шрифт?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны зациклить все label и проверить, является ли font-size14px
$('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>Вы можете использовать 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.info($('div').eq(1).css('font-size')); //16px
console.info($('div').eq(3).css('font-size')); //16pxdiv{
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>Вы должны пройти через все div. «$ ('div label')» Это всегда будет указывать на первый элемент. Я привел ссылку для вашей справки.
$("div").each(function(){
var fontSize = $(this).find('label').css("font-size");
console.info("size", fontSize);
if (fontSize <= "14px"){
// your code
}
});
вам нужно что-то, чтобы однозначно идентифицировать каждый шрифт для каждой метки, я предлагаю вам использовать класс или атрибут