HTML结构代码:
<div class="hd">
<span class="big">放大</span>
<span class="small">缩小</span>
</div>
<div class="bd">
<p>上午在北京人民大会堂会见载人深潜先进单位和先进工作者代表,代表党中央、国务院,向胜利完成蛟龙号载人深潜海试任务的广大科技工作者、干部职工表示热烈祝贺和诚挚问候,勉励大家团结拼搏、开拓奋进,推动我国海洋事业不断取得新突破,为建设海洋强国作出更大成绩</p>
</div>
Js效果代码:
<script type="text/javascript">
$(".big").click(function(){
$(".bd").css({"line-height":"+=2px","font-size":"+=2px"});
});
</script>
突然间怎么也看不出这是哪里出了问题,行高不能动态变化。JavaScript
<div class="hd">
<span class="big">放大</span>
<span class="small">缩小</span>
</div>
<div class="bd">
<p>上午在北京人民大会堂会见载人深潜先进单位和先进工作者代表,代表党中央、国务院,向胜利完成蛟龙号载人深潜海试任务的广大科技工作者、干部职工表示热烈祝贺和诚挚问候,勉励大家团结拼搏、开拓奋进,推动我国海洋事业不断取得新突破,为建设海洋强国作出更大成绩</p>
</div>
Js效果代码:
<script type="text/javascript">
$(".big").click(function(){
$(".bd").css({"line-height":"+=2px","font-size":"+=2px"});
});
</script>
突然间怎么也看不出这是哪里出了问题,行高不能动态变化。JavaScript
$(".big").click(function(){
$(".bd").css({"lineHeight":"+=2px","fontSize":"+=2px"});
});
</script>
自己试了下,虽然不够简洁,但是能够达到你要的效果~~ <script type="text/javascript">
$(".big").click(function () {
var a = $('.bd').css("line-height");
var b = $('.bd').css("font-size");
a = parseInt(a.substring(0, a.length - 2)) + 2 + "px";
b = parseInt(b.substring(0, a.length - 2)) + 2 + "px";
$(".bd").css({ "line-height": a, "font-size": b});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
.bd {
line-height: 1;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
<div class="hd">
<span class="big">放大</span>
<span class="small">缩小</span>
</div>
<div class="bd">
<p>上午在北京人民大会堂会见载人深潜先进单位和先进工作者代表,代表党中央、国务院,向胜利完成蛟龙号载人深潜海试任务的广大科技工作者、干部职工表示热烈祝贺和诚挚问候,勉励大家团结拼搏、开拓奋进,推动我国海洋事业不断取得新突破,为建设海洋强国作出更大成绩</p>
</div>
<script type="text/javascript">
$(".big").click(function(){
$(".bd").css({"line-height":"+=0.2"});
});
</script>
</body>
</html>