uni-app rrenderjs中生成的dom样式不生效

uni-app rrenderjs中生成的dom样式不生效

开发环境 版本号 项目创建方式
Windows win11-22598.100 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.4.6

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：荣耀V30Pro

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
```javascript
<template>  
    <view class="content">  
        <view id="echarts" :option="option" :change:option="echarts.changeData" class="echarts"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                option:[]  
            }  
         },  
         mounted(){  
             setTimeout(() => {  
                 this.option.push(1);  
             },1000)  
         },    
         methods:{  
             sayHello(a){  
                 uni.showToast({  
                    title:`点击了${a}`  
                 })  
             }  
         }  
    }  
</script>  

<script module="echarts" lang="renderjs">  
    let instance = null;  
    export default {  
        mounted() {  
            setTimeout(() => {  
                console.log(this.$ownerInstance)  
            },1000)  

         window.onClickTest = (a) =>{  
             console.log(this.$ownerInstance)  
             instance.callMethod('sayHello',a)  
         }  
         let echarts = document.getElementById("echarts");  
         //echarts.innerHTML = `<button type="button" onclick="onClickTest(45)">点我试一试</button>`  
         echarts.innerHTML = `<div class="red-txt">这是红色字体</div>`  
        },  
        methods: {  
            changeData(v,old,oi){  
                console.log(v,old,oi)  
                if(!instance){  
                    instance = oi  
                }  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .red-txt{}  
</style>  

<style lang="scss" >  
    .red-txt{color:red;}  
</style>

操作步骤： 见附件

预期结果： css样式对renderjs的dom生效

实际结果： css样式对renderjs的dom不生效

bug描述： renderjs中的生成的dom样式不生效，无论APP还是H5都不行，上一个版本3.3.13.20220314还是好的


更多关于uni-app rrenderjs中生成的dom样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在 h5 平台页面样式均会增加scoped，不管你style节点加没加 scoped 在 h5 平台你的 .red-txt 样式，一定会被scoped，所以你自己加的div，如果没有增加data-v-xxxxxx等属性，那么就不会生效，之前版本生效，是因为页面存在多个style节点时，没有全部增加scoped，这个是bug，新版本做了修复
App平台测试没有问题
如果你想让生效，那应该把 .red-txt 放到 App.vue 中作为全局样式

更多关于uni-app rrenderjs中生成的dom样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 renderjs 时，生成的 DOM 样式不生效，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 样式作用域问题

uni-app 默认使用了 scoped 样式，这会导致样式仅对当前组件生效。如果你在 renderjs 中动态生成的 DOM 元素不在当前组件的模板中，样式可能不会生效。

解决方法：

  • 使用全局样式（去掉 scoped）。
  • 在 renderjs 中直接通过 style 属性为元素添加样式。
const el = document.createElement('div');
el.style.color = 'red'; // 直接设置样式
document.body.appendChild(el);

2. 样式优先级问题

如果样式被其他更高优先级的样式覆盖，可能会导致样式不生效。

解决方法：

  • 使用 !important 提高样式优先级。
  • 检查是否有其他样式覆盖了你的样式。
/* 使用 !important */
.my-class {
  color: red !important;
}

3. 样式未正确加载

确保样式文件已正确加载，并且样式类名或选择器与生成的 DOM 元素匹配。

解决方法：

  • 检查样式文件是否引入。
  • 确保生成的 DOM 元素的类名或选择器与样式匹配。
const el = document.createElement('div');
el.className = 'my-class'; // 确保类名与样式匹配
document.body.appendChild(el);

4. DOM 元素未正确插入

如果生成的 DOM 元素未正确插入到页面中，样式自然不会生效。

解决方法：

  • 确保生成的 DOM 元素已插入到页面中。
  • 使用 appendChild 或 insertBefore 等方法将元素插入到 DOM 树中。
const el = document.createElement('div');
el.textContent = 'Hello, World!';
document.body.appendChild(el); // 确保元素已插入

5. renderjs 的执行时机问题

renderjs 的执行时机可能晚于样式的加载，导致样式未应用到动态生成的 DOM 元素上。

解决方法：

  • 确保 renderjs 在样式加载完成后执行。
  • 使用 setTimeout 延迟执行 renderjs 中的逻辑。
setTimeout(() => {
  const el = document.createElement('div');
  el.textContent = 'Hello, World!';
  document.body.appendChild(el);
}, 0);

6. renderjs 的上下文问题

renderjs 运行在独立的 JavaScript 上下文中，可能无法直接访问组件的样式或数据。

解决方法：

  • 通过 postMessage 或 uni.$emit 与主线程通信，传递样式或数据。
  • 在 renderjs 中直接操作 DOM 和样式。

7. 检查浏览器开发者工具

使用浏览器开发者工具（如 Chrome DevTools）检查生成的 DOM 元素，查看样式是否被正确应用，是否有其他样式覆盖。

示例代码

以下是一个完整的示例，展示如何在 renderjs 中生成 DOM 并应用样式：

<template>
  <view>
    <script module="renderjs" lang="renderjs">
      export default {
        mounted() {
          this.init();
        },
        methods: {
          init() {
            const el = document.createElement('div');
            el.className = 'my-class';
            el.textContent = 'Hello, World!';
            document.body.appendChild(el);
          }
        }
      }
    </script>
  </view>
</template>

<style>
/* 全局样式 */
.my-class {
  color: red;
  font-size: 20px;
}
</style>
回到顶部