admin管理员组文章数量:1415697
I am using the following code to change font size of bodytext div. However when I try with a page that has various formattings, and also inside a <div id="bodytext"> it doesn't work, I don't know why. It just changes the spacing between lines or something..
Working script:
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=".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>I am using the following code to change font size of bodytext div. However when I try with a page that has various formattings, and also inside a <div id="bodytext"> it doesn't work, I don't know why. It just changes the spacing between lines or something..
Working script:
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./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>Not working (that needs to be fixed):
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./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./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./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>- There are a lot of HTML errors in the 'broken' version. Use an editor with syntax highlighting and you'll see them. I would suggest fixing them first. – Rory McCrossan Commented Feb 15, 2019 at 21:35
-
Your code examples are setup to only update the font size on children elements of
#bodytext. If a element is more than 2 levels deep within your<div id="bodytext">they will not get the new font-sizes applied to them. – MarioD Commented Feb 15, 2019 at 21:46 - @RoryMcCrossan I tried through jsfiddle to remove some errors, but the same issue persists: jsfiddle/0fxqarws – Mike Commented Feb 15, 2019 at 21:48
-
@MarioD Even if I changed it to
$affectedElements.each( function(){and so on, but still it doesn't work. – Mike Commented Feb 15, 2019 at 21:50
1 Answer
Reset to default 1As mentioned in the ments the issue is with the var $affectedElements = $("#bodytext"); selector. This selector is only selecting the blockquote element, because it is the only direct sibling of the #bodytext element.
This means you are only changing the font size of the blockquote element. The dom of a browser has a cascading effect, which CSS adheres to. Therefore if you apply a font size of 13px to the blockquote element, but then apply an inline style further down in the dom to one of the blockquote elements siblings then that inline style will take precedence.
What I have done below is add a * selector to the $("#bodytext") selector, which will select all the elements inside of the #bodytext. I have done this to show that the issue is with the selector. However I would reend thinking of a better way of selecting the specific elements you need or removing the inline styles in the HTML.
NOTE: The only changes I made to the HTML was to clean up the broken tags.
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./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./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./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>本文标签： javascriptChange font size in a divStack Overflow
版权声明：本文标题：javascript - Change font size in a div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745237566a2649126.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论