使用Vue怎么獲取DOM元素的樣式

本篇文章為大家展示了使用Vue怎么獲取DOM元素的樣式，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

鐵嶺縣網站制作公司哪家好，找創(chuàng)新互聯(lián)！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、成都響應式網站建設等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯(lián)。

在 vue 中用 document 獲取 dom 節(jié)點進行節(jié)點樣式更改的時候有可能會出現(xiàn) 'style' is not definde的錯誤，這時候可以在 mounted 里用 $refs 來獲取樣式，并進行更改：

<template>
 <div  ref="abc">
  <!-- ... -->
 </div>
</template>
<script>
　　export default {
 　　mounted () {
  　　 console.log(this.$refs.abc.style.cssText)
 　　}
　　}
</script>

結果是 display: block;

如果我們給一個div設定全屏背景圖，就需要獲取屏幕高度進行賦值:

<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>

上述內容就是使用Vue怎么獲取DOM元素的樣式，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：使用Vue怎么獲取DOM元素的樣式
網頁地址：http://m.kartarina.com/article4/phocie.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、網站營銷、動態(tài)網站、軟件開發(fā)、企業(yè)網站制作、網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)