单个页面修改全局样式，不污染其他页面

最新推荐文章于 2024-04-15 07:45:00 发布

flhua1

最新推荐文章于 2024-04-15 07:45:00 发布

阅读量473

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/flhua1/article/details/134990003

版权

在Vue.js中，避免使用/deep/污染全局样式，通过在组件的mounted和beforeDestroy钩子中动态修改DOM样式实现局部影响。文章提供了一个原始但有效的解决方案，并鼓励讨论更优解。

摘要由CSDN通过智能技术生成

单个页面修改全局样式，不污染其他页面

前言：查了许多攻略，在scoped里加/deep/，实验不可行！

最后看到一篇思路，可在mounted时获取对应dom来修改样式，在离开组件时beforeDestroy来把样式修改回原样，实现效果。

Ps:虽然很原始但是能抓到耗子就是好猫…

代码示例：

mounted() {
   
  document
    .getElementsByClassName("header")[0]
    .style.<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flhua1

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端自适应rem.js的使用方法(不用三大框架，仅写一个单html页面使用)

人间草木

03-28

1197

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...

解决Ant-Design-vue(antdv)单独设置某个组件的样式,不污染全局(less预处理器)

qq_42292211的博客

09-17

2120

以表格(table)为例,我想只更改某个界面的表格头部颜色或者表格行间隙,行颜色等一.加外层容器首先找到此组件最近的一个外层容器,下面是一个最简单的示例 <div class='main-container'> <a-table/> </div> 此时table的外层容器为main-container,要想设置table内部的样式,只需要如下 .main-container{ //表格头部颜色 /deep/...

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

element-ui修改全局样式且只作用于当前页面

weixin_34026276的博客

03-06

4795

1）修改组件的样式，但是只作用于当前页面，其他页面不受影响，做法有两种：法一：使用关键字“/deep/” 1)在当前页面添加样式： <style lang="scss" scoped> 自定义类名 /deep/{ element ui选择器类名{ 样式 }} </style> 2) ：在其他页面写样式再导入到所需页面scss文件写法：...

element-ui样式篇：修改样式不影响全局，不影响其他组件

m0_60666921的博客

04-11

638

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！一个人可以走的很快，但一群人才能走的更远。

VUE 中不影响全局的状态下，修改样式

weixin_72099243的博客

03-09

396

vue 不修改全局样式下修改当前局部 element 组件库样式的方法

vue想要突破全局样式限制又不影响别的页面样式怎么办

dlchgg的博客

04-04

564

- 用scope盖不住全局，随意来个class匹配私定，搜索关键词：不要随便改，乱打class名 -->这里是改被全局定死的el-select选择框的长度，不想改全局，又不想影响别的页面。

vue项目使用公共组件,有个别页面需要改变一下公共组件的样式,使用css样式穿透/scoped使用为防止全局污染/使用scoped后你会发现没有生效页面

weixin_44272169的博客

05-25

1165

解释下vue中的scoped： style标签拥有scoped属性，css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。正常编辑加上scoped： <style scoped> .a{ color:red } <style> 可以浏览器F12看下该样式的编译后 .a[data-v-12332322] { color: red; } 注释:给组件中的d...

jq滑动切换页面

07-02

这里，`.page` 是单个页面的类名，`.active` 表示当前显示的页面。 3. **CSS 样式**：设置页面容器和页面的样式，确保初始状态下只有一个页面可见： ```css #slider { width: 100%; height: 100%; overflow: ...

项目中如何修改element-ui的默认样式（去除scoped,样式穿透＞＞＞ , less/sass : /deep/）

fengshaopu的博客

06-10

1511

如果我们要去修改这个的距离左边的宽度的话第一种：不使用sass，sess 就右键找到位置所在,然后找到对应的样式去编辑器里面修改，这样的话是实现不了的，我们要把scoped去掉就好了 2.使用 lass，less的话就可以用穿透样式了 >>> 还有 /deep/ >>>.el-pagination__total { margin-right: 72px; font-weight: 400; color: #606

vue 单个页面设置rem

weixin_43365995的博客

11-19

1461

加载element-resize-detector组件 let elementResizeDetectorMaker = require(“element-resize-detector”) 调用 mounted() {//实例被挂载后调用 let that = this; let erd = elementResizeDetectorMaker() erd.listenTo(docu...

vue修改当前页样式不影响公共样式的方法

weixin_30294709的博客

08-13

3888

在项目开发中需要对一些标签进行样式修改但是每次修改之后其他页面的样式也会跟着改变，在网上找了很多方法都不好使后来大神告诉我一种方法很好用分享给大家。 1：首先在template标签下的第一个div中定义一个以本文件为名的class，只要class唯一就行。 2：在style标签添加lang="scss"，并把所有的样式都包含在 .DeviceInfo{ }即可。如下图：...

页面有多层嵌套结构时，如何只修改特定部分的样式呢？

qq_30094821的博客

04-15

539

多层嵌套结构时，如何快速选择自己想要的页面元素呢？

vue配置全局样式

2026的博客

03-17

1771

vue cli全局样式导入

vue3设置全局样式

weixin_61133168的博客

01-28

2067

style><style>当代码复用程度低的时候，这两种都挺好，但是，当我们很多个页面都要使用同一种css样式的时候，就不太方便了，我们可以采用设置全局样式的方式，一次引入，全局使用。

vue中css样式覆盖问题 vue中css样式作用域 vue.js样式不起作用

weixin_33769207的博客

06-21

2034

问题背景：项目前端使用vue.js和element-ui,由于想要对输入框进行验证，输入值非法时输入框颜色变红，就想要根据el-input编译后的class进行修改，但是直接在html页面中调用class无效，在网上查资料后，发现把html中的<style scoped>里面的scoped去掉即可，由于达到效果了就没仔细...

vue 中使用 rem 布局

weixin_43771771的博客

03-23

524

vue 中使用 rem 布局方法一：在 index.html 或者 main.js 中添加以下代码： const setHtmlFontSize = () => { const htmlDom = document.getElementsByTagName('html')[0]; let htmlWidth = document.documentElement.clientWidt...

vue引入外部css scss文件怎么自动px转rem （vue PC端随屏幕分辨率与窗口大小自适应；只在单个页面生效等配置）

weixin_44019706的博客

01-11

2376

vue项目PC端随屏幕分辨率与窗口大小自适应 (兼容引入外部css scss文件自动px转rem) ; 对指定页面做自适应（vue&postcss-pxtorem）; 当分辨率改变的时候，高度会缩小，如何在分辨率改变时，高度也随之自适应...

关于vue单页面的scoped覆写css问题

DAmarkday的博客

04-22

417

关于子组件的根元素使用了默认的scoped属性之后，子组件会优先运行在该页面的与父组件同名的style，并且不会全面继承复写父组件的style样式，然而如果父组件的style也设置为scoped，那么子组件的根节点元素在受到自己的style样式影响的同时也会受到设置了scoped的父组件style的影响。 .vue模板中的样式是根据需要按需加载，访问一个页面该组件中的样式就会追加到head标...

Vue单个或部分页面使用rem适配问题

m0_38135164的博客

12-27

3195

Vue单个或部分页面使用rem适配问题

单个vue样式覆盖全局样式