首页 > 其他分享 >Vue 页面渲染完成后获取元素并修改其CSS样式

Vue 页面渲染完成后获取元素并修改其CSS样式

时间:2022-09-24 21:00:27浏览次数:45  
标签:style Vue headerElem 样式 元素 获取 changeStyle CSS 页面

1. 将所要获取的元素加入ref属性

<div slot="header" class="clearfix" ref="clearFix">
</div>

2.获取元素对象,并修改样式

methods: {
changeStyle: function () {
let headerElem = this.$refs.clearFix.parentNode
headerElem.style.padding = '0px'
headerElem.style.minHeight = '0px'
headerElem.style.backgroundColor = '#008065'
},
}

3.调用

mounted() {
this.changeStyle()
},




标签:style,Vue,headerElem,样式,元素,获取,changeStyle,CSS,页面
From: https://www.cnblogs.com/wei6/p/16726580.html

相关文章

  • CSS样式
    CSS应用方式1在标签上<tableborder="1"></table>2在head标签里<head><style>img{float:right;}</style></head>3在文件中<link rel="st......
  • CSS中的边框
    CSS的边框,这个是一个比较简单的样式,我们就直接通过一个案例来解释吧:  相关代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8">......
  • CSS换行均匀分布的布局
    想要实现一个如图的布局方式,说一下前提条件,不用js,父元素的宽度未知,子元素的宽度可知,让子元素在父元素均匀分布,一行无法摆出更多的子元素时换行,换行的子元素也保持同样的分......
  • 常见的css样式 弹性布局 css优先级
    1.工作常用到的添加手势cursor:pointer2.弹性布局display:flex参考如下:   3.css的优先级参考如下: ......
  • vue的生命周期
     1.创建前beforeCreateddata和methods还没有进行初始化 2.创建后createddata和methods已经初始化完成 3.渲染前beforeMount 已经编译好了模板字符串,但是......
  • vue 使用百度地图JavaScript API GL 组件
    <template><divclass="component"><el-cardclass="cardStyle"><!--ready,地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例--><baidu-map......
  • 计算机毕业设计 SpringBoot+Vue零食商城平台系统 零食网上商城系统 零食购物商城系统J
    ......
  • vue3 基础-补充 ref & provide-inject
    本篇主要对一些被以前内容(渲染,传值)等忽略的几个常用小技巧进行补充说明啦.v-once即对某个dom节点生效,其会限定只会渲染一次,不论数据是如何的变化,演示如下:<!......
  • vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍
    ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。1、refref属性除了能够获取元素外,也可以使用ref函数,......
  • Vue脚手架
    Vue脚手架vue-cli首先确保已安装的node和npmnode-vnpm-v其次确保npm镜像地址是淘宝镜像(有梯子除外)npmconfiggetregistry如果结果是:https://registry.npmmirror......