如何在CSS中获取当前文本大小

2024-04-12

我正在尝试编写一个 css,对于我可以放置的所有字符串,将这些字符串增加大约 3px。我不知道该怎么做,我想是这样的:

.increaseSize {
getSize()+3px;
}

有人可以帮助我吗?


我会寻求一种不同的、更简单的方法。

p.myText {
  font-size: 16px;
}

.increaseSize {
  font-size: 1.5em
}
<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

这将使任何 .increaseSize 元素的字体大小比其父元素大 50%。

你可以使用 calc() 但也许浏览器兼容性 https://caniuse.com/#search=calc是一个问题。这是一个更安全的解决方案。

这对你有帮助吗?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在CSS中获取当前文本大小 的相关文章

  • 整理 CSS 的最佳方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • CSS - 单个图像文件与多个文件的优点

    我注意到现在很多网站将所有图像都放在单个文件中 然后使用背景位置来偏移屏幕上显示的矩形 这是出于性能原因吗 如果是这样为什么 这称为 CSS 精灵 使用它有几个原因 对服务器的请求更少 文件大小稍小 因为大图像比单独的图像要小一些 预加载图
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • 水平离子涡旋不工作

    在我正在制作的项目中 我使用了离子滚动两次并且工作完美 垂直模式 但现在我尝试进行水平滚动并且不起作用 滚动出现但我无法滚动任何内容 HTML 代码很简单
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • jQuery animate() 和 CSS calc()

    我尝试设置CSScalc 使用 jQuery 动画 例如 element animate height calc 100 30px 500 我注意到calc 不支持 jQuery 动画 我希望有一种方法可以做到这一点 我不想要类似的方法 替
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本

随机推荐