Vue獲取DOM元素樣式和樣式更改示例
更新時間：2017年03月07日 16:24:19 作者：夏如眷
本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在 vue 中用 document 獲取 dom 節(jié)點進行節(jié)點樣式更改的時候有可能會出現(xiàn) 'style' is not definde的錯誤，這時候可以在 mounted 里用 $refs 來獲取樣式，并進行更改：
<template>
<div style="display: block;" ref="abc">
<!-- ... -->
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$refs.abc.style.cssText)
}
}
</script>
結(jié)果是 display: block;
如果我們給一個div設(shè)定全屏背景圖，就需要獲取屏幕高度進行賦值:
<template>
<div ref="nana">
<!-- ... -->
</div>
</template>
<script>
export default {
mounted () {
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
this.$refs.nana.style.height = h +'px';
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個狀態(tài)管理庫,它提供了一種簡單而強大的方式來管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
本文主要介紹了Vue預(yù)覽圖片和視頻的幾種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
前后端分離進行項目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
vite是一個由vue作者尤雨溪專門為vue打造的開發(fā)利器,其目的是使 vue項目的開發(fā)更加簡單和快速,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3+Vite中使用JSX的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了如何利用Vue2實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
這篇文章主要介紹了vant的picker的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中的select綁定多個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js中class與style的增強綁定實現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯，因此，Vue.js 做了專門的增強，表達式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組，本文給大家講解Vue.js中class與style的增強綁定知識，感興趣的朋友一起看看吧2023-04-04