浮动提示title更改字体大小_title属性字体大小改变-CSDN博客

本文链接：https://blog.csdn.net/syx_cainiao/article/details/105716623

本文介绍了两种方法来改变浮动提示title的字体大小。方法1利用getComputedStyle和getPropertyValue获取并调整元素样式属性值，当字体小于等于18px时设定为18px。方法2则将字体大小信息存储在localStorage中，便于持久化设置。总结提到getPropertyValue配合getComputedStyle获取的是实际值，而与style结合则仅获取内联样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目前提：已修改了title的默认样式，主要js代码

function showTitle(el, title) {
  const popover = getPopover();
  const popoverStyle = popover.style;

  if (title === undefined || title==='') {
    popoverStyle.display = 'none';
  } else {
    const elRect = el.getBoundingClientRect();
    const elComputedStyle = window.getComputedStyle(el, null);
    const rightOffset = parseInt(elComputedStyle.getPropertyValue('padding-right')) || 0;
    const topOffset = parseInt(elComputedStyle.getPropertyValue('padding-top')) || 0;
    popoverStyle.visibility = 'hidden';
    popoverStyle.display = 'block';
    popover.querySelector('.popover-content').innerHTML = title;
    popoverStyle.left = elRect.left - popover.offsetWidth / 2 + (el.offsetWidth - rightOffset) / 2 + 'px';
    popoverStyle.top = elRect.top - popover.offsetHeight + topOffset -5 + 'px';
    popoverStyle.display = 'block';
    popoverStyle.visibility = 'visible';
  }
}

方法1：利用getComputedStyle和getPropertyValue获取元素的样式属性值

获取到当前元素的字体大小

const elComputedStyle = window.getComputedStyle(el, null);
const fontSize= parseInt(elComputedStyle.getPropertyValue('font-size')) || 0;

当当前元素的字体大小小于等于18时，是小字体，将title的字体大小设置为18px

if (fontSize<=18){
      popoverStyle.fontSize = '18px';
    }else{
      popoverStyle.fontSize = '24px';
      popoverStyle.lineHeight = '26px';
    }

getComputedStyle和getPropertyValue获取到的始终是实际的值

方法2：将控制字体大小的字段存储到localStorage

获取到存储在localStorage里的值：

const fontSize = localStorage.getItem('isSmallFont');

if (fontSize=="true"){
      popoverStyle.fontSize = '18px';
    }else{
      popoverStyle.fontSize = '24px';
      popoverStyle.lineHeight = '26px';
    }