vue3获取dom元素的font-size
时间: 2023-11-13 13:04:05 浏览: 154
要获取某个 DOM 元素的 font-size,可以使用 window.getComputedStyle 方法。示例如下:
```js
const el = document.getElementById('some-element');
const computedStyle = window.getComputedStyle(el);
const fontSize = computedStyle.getPropertyValue('font-size');
console.log(fontSize);
```
相关问题
作为uniapp的开发,设置app.vue的 html,body{ font-size: 17rpx; }无效,有什么解决方案
如果在 `app.vue` 中设置 `html,body` 的字体大小无效,可以尝试在 `main.js` 中添加以下代码:
```js
import Vue from 'vue';
//设置html字体大小
const setHtmlFontSize = () => {
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
const htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = `${htmlWidth / 10}px`;
};
//初始化
setHtmlFontSize();
//监听页面尺寸变化
window.addEventListener('resize', () => {
setHtmlFontSize();
});
```
这段代码会根据页面的宽度动态计算出 `html` 元素的字体大小,并设置为 `htmlWidth / 10`。这样可以保证在不同尺寸的设备上都能够正确显示。
需要注意的是,如果在某些组件中使用了 `px` 作为单位,可能会导致字体大小不一致的问题。在这种情况下,可以使用 `rpx` 作为单位来设置字体大小,以确保在不同设备上都能够正确显示。
在开发者工具里我看到了 我好像怎么写都会被.app .el-radio__label { font-size: 12px; }覆盖掉 这个是不是在vue里面优先级很高无法被覆盖掉
是的,这是由于 Vue 中样式的优先级问题导致的。在 Vue 中,组件的样式会被编译成具有作用域的 CSS,也就是说,样式只会应用到当前组件的 DOM 元素以及其子元素中,不会影响到全局的样式。因此,如果全局样式与组件样式冲突,组件样式会具有更高的优先级。
要解决这个问题,可以使用以下方法:
1. 使用更具体的选择器:如果你的样式被其他样式覆盖了,可以尝试使用更具体的选择器,以提高样式的优先级。
2. 使用 !important:在某些情况下,使用 !important 可以强制覆盖其他样式。但是,过度使用 !important 可能会导致样式不可控,因此应该谨慎使用。
3. 修改全局样式:如果你无法通过其他方法解决问题,可以尝试修改全局样式,以使其与组件样式兼容。
希望这些方法能够帮助你解决样式优先级的问题。