（已解决）element-ui怎么修改element.style 内联样式

最新推荐文章于 2025-06-11 12:21:17 发布

原创最新推荐文章于 2025-06-11 12:21:17 发布 · 865 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端

收录于

本文介绍了在Vue中如何通过设置!important来提升内联样式的权重，使其覆盖默认的60px，同时提及了一种深度穿透的CSS技巧。作者还提供了相关链接以供进一步参考。

vue中element.style 内联样式是js中写死的，所以用!important，把权重拉过来就可以强制生效。

如上：我使用权重!important把200px越过element.style 内联样式60px，直接生效了。

另外还有一种深度穿透的方法：参考：https://blog.csdn.net/guhanfengdu/article/details/126332421?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170478499116800192271446%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170478499116800192271446&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-126332421-null-null.142^v99^control&utm_term=html%E7%A9%BF%E9%80%8F%E6%B7%B1%E5%BA%A6&spm=1018.2226.3001.4187

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

比屋真定帆

关注关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于vue在PC端，对不同屏幕进行适配，未使用媒体查询（大小的自适应）的问题（ant-design-vue，element-ui 均可使用）

chenyu-max

10-27

4686

前言前端项目中，难免会遇到这种问题，你根据UI的设计图在本机搭建页面，显示比例或许会是正常的，但是你将页面缩放，或者说，你将页面移植到其他尺寸的屏幕中，显示的UI效果就会变形。所以，我们需要对我们的项目进行多屏幕适配以下是我个人在 vue 项目中的适配方法，亲测在使用 ant-design-vue 和 element-ui 组件库时任然有效。不过这个方法无法更改行间样式，例如 element-ui 的 form 组件的 label 添加行间样式，此时，就无法通过下面的方法进行适配

参与评论您还未登录，请先登录后发表或查看评论

element.style是什么，怎么处理

qq_40708412的博客

04-13

3642

在网页的检查状态下，样式中会有一个element.style,如下图：这个element.style就是选中标签的内联样式，上图中这个内联样式因为我没写所以是空的。二是，如果写了内联样式，又想在外部样式或者内部样式中加以修改的话，那么给这些新写的样式后面加上！important。一是，尽量避免去写内联样式（内联样式又叫行内样式）；

CSS详解(Element中style属性，伪元素，StyleSheet对象)

热门推荐

上善若泪

05-03

1万+

目录 1 HTML元素的style属性 2 Element节点的style属性 2.1 基本用法 2.2 cssText属性 2.3 CSS模块的侦测 2.4 setPropertyValue()，getPropertyValue()，removeProperty() 3 CSS伪元素 4 StyleSheet对象 4.1 获取样式表 4.2 属性 4.2.1 media属性...

修改Element.style默认样式的几种方式

2301_76603744的博客

09-23

5597

ElementUI，uview是一款非常强大的前端UI组件库，它默认定义了很多美观的样式，但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式element.style。第二种添加一个style标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此在不同的vue组件中修改同一个样式有可能会有冲突。在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。通过内联样式 style ，绑定类样式的方式，可以在。

如何修改element.style

weixin_50666902的博客

11-25

9514

今天在使用elementplus时遇到一个问题，我想要修改导航栏的宽度，在css中写入之后发现并没有起到效果，之后通过f12定位之后发现：通过查询资料和询问老师得出解决方法：在css样式中书写想要修改的属性时在后面加入！important即可覆盖element.style,如下： width: 100vw !important; 记录一下，免得以后忘记 ...

如何修改element ui的样式

a983677218的博客

04-10

1365

global.cssmain.jsstylestylestylescopedscopedstyle/deep/>>>::v - deep>>>stylescriptselfstylestyle此外，如果想要动态修改 Element UI 的主题颜色，可以通过修改 SCSS 变量来实现，但这需要在代码运行前进行配置4。如果项目使用了 CDN 引入 Element UI 的 CSS 文件，也可以通过重新请求不同主题的 CSS 文件并替换来实现动态换肤。

如何修改element.style内联样式

Gomeer的博客

01-05

3580

我在vue中使用element组件插件时，或者使用swiper插件时，会发现有些时候，怎么修改 style里面的值，页面上的样式都不会修改，当我用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。我其实element.style是一种内联样式，很多情况下是在一些JavaScript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方...

怎么调整Element-ui组件样式，调到崩溃！！！

最新发布

T_T_H的博客

06-11

1907

你是否也在苦恼于调整Element-ui组件的样式，最近在实习做项目的过程中调element-ui样式调到崩溃，含泪总结一下几点。避免踩坑！！！

element ui组件的element.style怎么改？

q249859693的博客

03-10

8405

比如抽屉（el-drawer）的element.style的width 先在el-drawer外面建一个盒子，防止影响其他组件样式 <div class="eldrawer"> <el-drawer> </el-drawer> </div> 在样式里修改el-drawer的width,一定要加上!important .eldrawer .el-drawer { width: 85% !important; } ......

element.style样式如何修改

仰望心空1123

01-12

4102

element.style是一种内联样式,一般都是代码里写死的。其实我们可以用!important来修改它

样式属性操作

m0_72313625的博客

08-21

1620

element.style 行内样式操作修改的样式比较少或者想达到的功能简单的情况下，我们应该使用元素.style 的方式来进行修改 element.className 类名样式操作适合于样式较多或者功能比较复杂的情况下使用 element.classList.toggle('类名')切换类采用element.classList.toggle('类名')(支持ie10以上的版本),切换类就是没有就添加，有就移除。

如何修改element.style样式

weixin_48112284的博客

12-29

1502

如何修改element.style样式

在vue组件中更改element样式的几种方法

RumbleWx的博客

02-16

6728

在vue组件中更改element样式的几种方法

怎么改变element.style样式

wssg1206的博客

09-11

1115

我们在修改element的默认样式的时候，如果是elemnt.style样式，我们怎样修改style里的值，页面的样式都不会被改变，其实element.style是一中内联样式。我们找到这个代码的原本类名。important才能修改。

Vue修改element.style的属性,让前端的展示恢复

游戏人生__假的

04-22

1128

学习vue技术过程中总结的一些小问题学习

如何修改element.style的样式

m0_57454052的博客

04-07

2991

我们通常在用组件库或者调试web样式时发现有 element.style这样的类名：这种样式其实是行内样式导致的 //但是像element这种框架没法修改行内样式 <el-tabs ref="navTabs" tab-position="left" style="height: 400px; margin-top: 100px" trigger='hover'> <el-tab-pane v-for="item in Solution.productVoLi

vue中如何修改element.style样式？

m0_58266149的博客

09-16

2585

1.举例我想将padding设置为0 2.直接在相关element组件中,设置style="padding:0px;"即可修改成功

修改elementui 的默认样式element.style样式

南北极之间

12-17

4372

我们在修改elementui 样式的时候，如果是element.style样式：我们怎么修改 style里面的值，页面上的样式都不会被改变，当你用f12查看结构样式时，会发现里面只有 element.style的值，无法修改。其实element.style是一种内联样式。我们找到这个代码的原本类名。要用!important才能修改。