Question

我正在使用滑块来增大或减小<td>中文本的字体大小。

我想做的是，当<td>中的文本碰到封闭的<td>的边缘时，使用jQuery阻止我的滑块增加字体大小。

这是我用来通过滑块调整字体大小的JavaScript

$( function() {
    var handle = $( "#custom-handle-bottom" );
    $( "#fontsliderbottom" ).slider({
        value:current_bottom_font_size,
        min: 0,
        max: 70,
        step: 1,
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );

            $('.lowertext').css('font-size', ui.value+'px');

        }
    });
});

因此，也许有一些代码可以确定td.lowertext中的文本是否比td.lowertext的宽度宽或宽？

Answer 1

要在div中读取文本大小，可以使用offsetWidth元素属性（还需要在CSS中设置max-width以避免自动调整td元素的大小）

var s=120, fid= setInterval(x=>
{ 
  if(box.offsetWidth>text.offsetWidth) { 
    text.style.fontSize = (++s/10)+'px';
  } else {
    clearInterval(fid);
  }
},10)

#box { max-width: 200px; width:200px; height: 80px; background: yellow;}
#text { white-space: nowrap; }

<table><body><tr>
  <td id='box' ><a href=# id=text>some text</a><td>
</tr></body></table>

当文本遇到框的边界时，停止增加字体大小

1 个答案: