vue使用原生js創(chuàng)建元素樣式不生效問題及解決
vue使用原生js創(chuàng)建元素樣式不生效
在Vue項目中也會遇到需要動態(tài)創(chuàng)建DOM的情況，但是采用指定className的方式給創(chuàng)建的DOM元素指定樣式不起作用，在調(diào)試界面能看到類名被解析，但是樣式未加載
三天里嘗試了N種方法，終于填了這個大坑，有需要的可以參考一下：
measureTooltipElement = document.createElement('div')
measureTooltipElement.className = "ol-tooltip ol-tooltip-measure"樣式：
.ol-tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 14px 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
}
.ol-tooltip-measure {
opacity: 1;
font-weight: bold;
}但是在頁面渲染時卻不生效：
參考了網(wǎng)上眾多方法，有以下幾種可能：
1.Vue組件中樣式Style中scoped導(dǎo)致樣式局部生效，因為采用scoped每個類渲染后會有一個單獨的data-v-xxxx編碼格式，防止樣式污染，去除即可。（這里測試無效）
2.使用樣式穿透，跳過scoped，這樣就不用去除scoped造成全局樣式污染。Vue2使用/deep/ className，Vue3使用:deep(className)，此外還有>>>（可以嘗試一下，我這里沒有效果）。
// Vue3
:deep(.ol-tooltip) {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 14px 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
}
:deep(.ol-tooltip-measure) {
opacity: 1;
font-weight: bold;
}
// Vue2
/deep/ .ol-tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 14px 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
}
/deep/ .ol-tooltip-measure {
opacity: 1;
font-weight: bold;
}3.可能是類的優(yōu)先級，在子類前加上父類，這里時動態(tài)創(chuàng)建的類，所以使用了也沒效果。
4.我解決的辦法：重新創(chuàng)建一個CSS/SCSS樣式文件，然后在Vue組件中引用該文件即可，將不生效的樣式都放在該樣式文件中，不需要再去除scoped和deep。
vue中創(chuàng)建的dom樣式失效
原因：less,sass,scss 設(shè)置了scoped
關(guān)閉scoped即可解決
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
去年，vue3出來了。增加了很多新功能，但是也刪掉了一些功能。比如刪掉了vue2中的過濾器filter功能。與此同時，官方建議：用方法調(diào)用或計算屬性替換過濾器。本文將分析vue3刪除過濾器的原因及如何用其他方法實現(xiàn)過濾器的功能2021-05-05
vue-cropper插件實現(xiàn)圖片截取上傳組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cropper插件實現(xiàn)圖片截取上傳組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vant的Loading加載動畫組件的使用(通過接口拿數(shù)據(jù)時顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動畫組件的使用,通過接口拿數(shù)據(jù)時顯示加載狀態(tài),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue安裝vue-router出錯問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue2子組件綁定 v-model,實現(xiàn)父子組件通信方式
這篇文章主要介紹了Vue2子組件綁定 v-model,實現(xiàn)父子組件通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3+ts如何通過lodash實現(xiàn)防抖節(jié)流詳解
loadsh是一個工具庫，我們通常使用loadsh的debounce函數(shù)處理防抖,下面這篇文章主要給大家介紹了關(guān)于vue3+ts如何通過lodash實現(xiàn)防抖節(jié)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03