javascript - 更改 div 中的字体大小
问题描述
我正在使用以下代码来更改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: " more text</font></span></b><font size="5"><span
lang=ar-eg> <b>more words</b></span><b>"</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> </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></span></b><font size="5"><b>"</span></b></font><b><font size="5">[7].</font></span></b></p>
</blockquote>
</div>
解决方案
正如评论中提到的,问题出在var $affectedElements = $("#bodytext");
选择器上。这个选择器只选择blockquote
元素,因为它是元素的唯一直接兄弟#bodytext
。
这意味着您只更改blockquote
元素的字体大小。浏览器的 dom 具有层叠效果,这是 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>
推荐阅读
- python - 无法显示 pyspark 数据帧,即使它很小('.show()' 问题)
- reactjs - DeepL 客户端站点使用情况
- azure - 用于将数据库从一个订阅复制到另一个订阅的 Azure 角色
- java - 放置在自定义对话框布局中时为空的公开下拉菜单
- html - 我如何制作这种桌子?我试过这样做,但总是出现一条额外的线
- android - 如何在子小部件中调用函数?
- reactjs - 使用 JSON 数据进行分割掩码 ReactJS
- ms-access - 编辑列表框项目
- matlab - 使用 while 循环逼近 acsc 的泰勒级数
- nginx - 确保 TLSv1.2 在 stunnel 中?