Как уже упоминалось в комментариях, проблема связана с селектором var $affectedElements = $("#bodytext");
.Этот селектор выбирает только элемент blockquote
, поскольку он является единственным прямым братом элемента #bodytext
.
Это означает, что вы изменяете только размер шрифта элемента blockquote
.Дом браузера имеет каскадный эффект, которого придерживается CSS.Поэтому, если вы примените размер шрифта 13px
к элементу blockquote
, но затем примените встроенный стиль ниже в dom к одному из родственных элементов blockquote
, тогда этот встроенный стиль будет иметь приоритет.
То, что я сделал ниже, это добавление селектора *
к селектору $("#bodytext")
, который выберет все элементы внутри #bodytext
.Я сделал это, чтобы показать, что проблема с селектором.Однако я бы рекомендовал подумать о лучшем способе выбора нужных вам элементов или об удалении встроенных стилей в HTML.
ПРИМЕЧАНИЕ. Единственные изменения, которые я внес в HTML, - это очистка сломанных тегов.
var $affectedElements = $("#bodytext *"); // Can be extended, ex. $("div, p, span.someClass")
// Storing the original size in a data attribute so size can be reset
$affectedElements.children().each( function(){
var $this = $(this);
$this.data("orig-size", $this.css("font-size") );
});
$("#btn-increase").click(function(){
changeFontSize(1);
})
$("#btn-decrease").click(function(){
changeFontSize(-1);
})
$("#btn-orig").click(function(){
$affectedElements.children().each( function(){
var $this = $(this);
$this.css( "font-size" , $this.data("orig-size") );
});
})
function changeFontSize(direction){
$affectedElements.children().each( function(){
var $this = $(this);
$this.css( "font-size" , parseInt($this.css("font-size"))+direction );
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>
<div id="bodytext">
<blockquote>
<h1 dir="ltr" align="center">
<span style="font-size: 35pt" lang="ar-sa">title page</span></h1>
<p class=MsoNormal dir=ltr style='text-align:justify'><b>
<font size="5">4. some text: " more text</font></b><font size="5"><span
lang=ar-eg> <b>more words</b></span><b>"</b></font><b><font size="5">[6].</font></b></p>
<p class=MsoNormal dir=ltr style='text-align:justify'>
<font size="5">new sentence..................</font>
<font style="font-size: 18pt" SIZE="5">
<a style="font-size:18pt;" href="http://example.com/file.html">a link</a></font><font size="5">texttexttext.......</font><font SIZE="5" face="Times New Roman">
<span lang="AR-EG" style="font-size: 18pt; ">
<a href="http://www.example.com/file.php">a link</a></span></font><font size="5">words words words words words ..</font></p>
<h2 dir=ltr> </h2>
<h2 dir=ltr><b><span style="font-size: 22pt; font-style: normal">
<a name="text">other text</a></span></b></h2>
<p class=MsoNormal dir=ltr style='text-align:justify'><b>
<font size="5">"final words....</font></b><font size="5"><b>"</b></font><b><font size="5">[7].</font></b></p>
</blockquote>
</div>