JS实现对DIV里内容的字体方法或缩小
html代码
只写主要代码,样式可以自己写
<div class="content_sms">
这是需要放大或缩小的内容
</div>
<!-- 放大缩小按钮-->
<div id= "bigFontSize">
放大
</div>
<div id= "smallFontSize">
缩小
</div>
JS代码
$(document).ready(function () {
var fontSize = $(".content_sms").css("font-size");
console.log(fontSize)
//取得当前字体大小
var fontSizeNumber = parseFloat(fontSize , 10);
console.log(fontSizeNumber)
//取得单位
var unit = fontSize.slice(-2);
console.log(unit)
var lineSize = $(".content_sms").css("line-height");
console.log(lineSize)
//取得当前字体大小
var lineSizeNumber = parseFloat(lineSize , 10);
console.log(lineSizeNumber)
//取得单位
var lineUnit = lineSize.slice(-2);
console.log(lineUnit)
//放大字体,bigFontSize为按钮id
$("#bigFontSize").click(function () {
if(fontSizeNumber < '30'){
fontSizeNumber += 2;
$(".content_sms").css("font-size", fontSizeNumber + unit);
lineSizeNumber += 2;
$(".content_sms").css("line-height", lineSizeNumber + lineUnit);
}
});
//减小字体,smallFontSize为按钮id
$("#smallFontSize").click(function () {
if(fontSizeNumber > '14'){
fontSizeNumber -= 2;
$(".content_sms").css("font-size", fontSizeNumber + unit);
lineSizeNumber -= 2;
$(".content_sms").css("line-height", lineSizeNumber + lineUnit);
}
});
});