在 div 中更改字体大小

Question

我正在使用以下代码更改 bodytext div 的字体大小。但是，当我尝试使用具有各种格式的页面并且在 <div id="bodytext"> 内时它不起作用，我不知道为什么。它只是改变行之间的间距或其他东西..

工作脚本：

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">
  <p style="font-size : 30px">This text is initially 30px</p>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

不工作（需要修复）：

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: &quot; more text</font></span></b><font size="5"><span
lang=ar-eg> <b>more words</b></span><b>&quot;</span></b></font><b><font size="5">[6].</font></span></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></span></p>
  <h2 dir=ltr>&nbsp;</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">&quot;final words....</font></span></b><font size="5"><b>&quot;</span></b></font><b><font size="5">[7].</font></span></b></p>
</blockquote>  
</div>

Answer 1

如评论中所述，问题出在 var $affectedElements = $("#bodytext"); select 或。此 selector 仅 selecting blockquote 元素，因为它是 #bodytext 元素的唯一直接兄弟。

这意味着您只是在更改 blockquote 元素的字体大小。浏览器的 dom 具有级联效果，CSS 坚持。因此，如果您将 13px 的字体大小应用到 blockquote 元素，然后在 dom 中进一步应用内联样式到 blockquote 元素兄弟姐妹之一，那么内联样式将优先。

我在下面所做的是将 * selector 添加到 $("#bodytext") selector，这将 select 中的所有元素#bodytext。我这样做是为了表明问题出在 selector 上。但是，我建议考虑一种更好的方法来 selecting 您需要的特定元素或删除 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: &quot; more text</font></b><font size="5"><span
lang=ar-eg> <b>more words</b></span><b>&quot;</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>&nbsp;</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">&quot;final words....</font></b><font size="5"><b>&quot;</b></font><b><font size="5">[7].</font></b></p>
  </blockquote>   
</div>

在 div 中更改字体大小

Change font size in a div

html

javascript

css

jquery

font-size