HTML文字大小和背景

发布网友发布时间：2022-04-24 16:02

共3个回答

热心网友时间：2023-10-21 06:25

<html>
<script src='jquery-1.9.1.js'></script>
<body>
<input type="button" value="+" id="fontSizeUp">
<input type="button" value="-" id="fontSizeDown">
<br/>
<span id ="articleBody" style="background:#f50404; font-size:12px">可以这样让文字有背景，还可以调节文字大小不</span>
<script>
(function($) {
var fontSize = 18;
var lineHeight = 36;
var TimeFn = null;
$('#fontSizeUp').on('click',function() {
// 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    TimeFn = setTimeout(function(){
    fontSize += 2;
lineHeight += 2;
$('#articleBody').css({'font-size': fontSize, 'line-height': lineHeight + 'px'});
    },1);
});
$('#fontSizeDown').on('click',function() {

// 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    TimeFn = setTimeout(function(){
    if(fontSize > 10) {
fontSize -= 2;
lineHeight -= 2;
$('#articleBody').css({'font-size': fontSize, 'line-height': lineHeight + 'px'});
}
    },1);
});
$('#fontSizeUp').on('dblclick',function() {
// 取消上次延时未执行的方法
    clearTimeout(TimeFn);
});
$('#fontSizeDown').on('dblclick',function() {
// 取消上次延时未执行的方法
    clearTimeout(TimeFn);
});
})(jQuery);
</script>
</body>
</html>

backgtound 你写错了，所以没有背景颜色。上面的示例加了字体放大缩小的写法

热心网友时间：2023-10-21 06:25

先要把span变成块元素（display：block），设置宽高之后才能使设置的背景色起作用（或者不设置宽高，那默认就是文字的大小）

热心网友时间：2023-10-21 06:26

字体可以，背景不可以，背景你发错了