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