改变v-html渲染出来的样式
- 定义一个class在style标签中使用深度选择器 >>>指向想要改变样式的元素,这里以改变图片样式为例,测试可用。(也可以尝试使用 width:100% !important)
update() {
*// 主要是通过操作DOM和使用Vue生命周期钩子函数实现*
let obj = document.getElementById('content');
let imgs = obj.getElementsByTagName('img');
for (let i =0; i < imgs.length; i++) {
imgs[i].style.width = '100%';
imgs[i].style.height = '100%';
}
}
-
去掉 style中的scoped
在vue组件中,我们写style时,为了防止页面样式冲突,在每个组件中会加上scoped属性。经测试,去掉该属性即可渲染样式成功。但是在组件过多或者项目过大时,经常会出现页面样式冲突,因此该方法不建议使用。
tips: scoped属性导致css仅对当前组件生效,而html绑定渲染出的内容可以理解为是子组件的内容,一般情况下子组件不会被加上对应的属性,所以不会应用带有scoped的css。