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)致樣式局部生效，因?yàn)椴捎胹coped每個類渲染后會有一個單獨(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)先級，在子類前加上父類，這里時動態(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中使用動態(tài)import()語法動態(tài)加載組件
在Vue中,你可以使用動態(tài)import()語法來動態(tài)加載組件,動態(tài)導(dǎo)入允許你在需要時異步加載組件,這樣可以提高應(yīng)用程序的初始加載性能,本文給大家介紹在Vue中使用動態(tài)import()語法動態(tài)加載組件,感興趣的朋友一起看看吧2023-11-11
vue element-ui el-cascader級聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法
這篇文章主要介紹了vue element-ui el-cascader級聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。2023-07-07
這篇文章介紹了vue3手動設(shè)置滾動條位置自動定位功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
vue實(shí)現(xiàn)頁面自適應(yīng)的常用4種方法
前端頁面自適應(yīng)有很多方法可以實(shí)現(xiàn),本文小編將為大家詳細(xì)介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法
這篇文章主要介紹了vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
使用Vue2實(shí)現(xiàn)簡單的購物車功能(可直接使用)
這篇文章主要給大家介紹了如何使用Vue2實(shí)現(xiàn)簡單的購物車功能,文中有相關(guān)的代碼示例,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
本教程是介紹如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,對vue中provide、inject的使用方法感興趣的朋友一起看看吧2024-02-02
利用Vue3的Teleport實(shí)現(xiàn)模態(tài)對話框功能
在前端開發(fā)中,模態(tài)對話框是一種常見的用戶交互方式,它能夠有效地提示用戶、收集信息或確認(rèn)操作,隨著現(xiàn)代框架的演進(jìn),Vue 3 的出現(xiàn)為我們提供了更便捷、高效的方式來處理復(fù)雜的界面布局,今天,我們將深入探討如何利用 Vue 3 的新特性 Teleport 來實(shí)現(xiàn)模態(tài)對話框2025-02-02