最近项目中常遇到样式无法修改的问题,无论怎么修改style里边的值,页面样式都不会有变化。
如下图,style中的height属性并不是自己定义的只有改变这个值我的页面高度才会正常显示,在项目中怎么都找不到定义在哪里,控制台改变属性值并不能真正解决页面问题。
后来发现element.style是一种内联样式,很多情况下是在一些JavaScript代码里写死的,所以项目中我们找不到。但有些时候,我们在使用第三方js文件时,会遇到。那么我们如何去修改它才能达到我们想要的效果呢
一、在源代码中我们用 !important 语法优先权来实现我们想要的效果。!important 的作用是提高指定样式规则的应用优先权;在我们定义的属性值后边加上 !important 就可以替代它原本的样式。
二、在 Vue+elementUI 项目中,很多样式是elementUI组件自带的所以在我们项目中加上!important 属性也没有效果。我们想要调整样式的时候要在该class选择器前加上 /deep/ 后再在要修改的样式和属性后加上 !important 属性即可。具体写法如下图: