element.style内联样式如何修改

最近项目中常遇到样式无法修改的问题,无论怎么修改style里边的值,页面样式都不会有变化。

如下图,style中的height属性并不是自己定义的只有改变这个值我的页面高度才会正常显示,在项目中怎么都找不到定义在哪里,控制台改变属性值并不能真正解决页面问题。

后来发现element.style是一种内联样式,很多情况下是在一些JavaScript代码里写死的,所以项目中我们找不到。但有些时候,我们在使用第三方js文件时,会遇到。那么我们如何去修改它才能达到我们想要的效果呢

一、在源代码中我们用 !important 语法优先权来实现我们想要的效果。!important 的作用是提高指定样式规则的应用优先权;在我们定义的属性值后边加上 !important 就可以替代它原本的样式。

二、在 Vue+elementUI 项目中,很多样式是elementUI组件自带的所以在我们项目中加上!important 属性也没有效果。我们想要调整样式的时候要在该class选择器前加上 /deep/ 后再在要修改的样式和属性后加上 !important 属性即可。具体写法如下图:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。