[英]How to apply css to all html elements in a div selector with jquery
I need to apply css font-size
by a jquery on click to every element under div selector. 我需要通过单击将jQuery的CSS
font-size
应用于div选择器下的每个元素。 But I can't make them affect. 但是我不能让他们产生影响。 This is how I tried.
这就是我尝试过的方式。
CSS CSS
#reading_pane{
font-size:14pt;
}
HTML HTML
<div id="reading_pane">
<p>this is a text</p>
<span>this is another text</span>
</div>
<a id="incfont">A+</a>
<a id="decfont">A-</a>
javascript JavaScript的
$(document).ready(function() {
$('#incfont').click(function(){
curSize= parseInt($('#reading_pane span, p').css('font-size')) + 2;
if(curSize<=20)
$('#reading_pane').css('font-size', curSize);
});
$('#decfont').click(function(){
curSize= parseInt($('#reading_pane').css('font-size')) - 2;
if(curSize>=12)
$('#reading_pane').css('font-size', curSize);
});
});
As the detailed above. 如上文所述。 I need every
<p>
and <span>
in div#reading_pane
change the size on each a
clicked. 我需要每
<p>
和<span>
在div#reading_pane
更改每个大小a
点击。
The main problem is that .css('font-size')
returns size in pixels, not in points. 主要问题是
.css('font-size')
返回以像素为单位的大小,而不是以点为单位。 So, based on this question and avoiding code duplication it can be so: 因此,基于此问题并避免代码重复,可以这样:
$(document).ready(function()
{
$('#incfont').click(function()
{
changeFontValue(2);
});
$('#decfont').click(function()
{
changeFontValue(-2);
});
function changeFontValue(difference)
{
var newSize = Math.round(parseInt($('#reading_pane').css('font-size')) * 72 / 96) + difference;
if (newSize >= 12 && newSize <= 20)
{
$('#reading_pane').css('font-size', newSize + 'pt');
}
}
});
Note : I also modified HTML: 注意 :我还修改了HTML:
<a id="incfont">A+</a>
<a id="decfont">A-</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.