无法将背景颜色添加到 App.Vue 之外的 html 元素
Posted
技术标签:
【中文标题】无法将背景颜色添加到 App.Vue 之外的 html 元素【英文标题】：Cannot add a background color to html element outside of App.Vue 【发布时间】：2018-08-05 05:07:09 【问题描述】：首先，感谢您阅读我的问题！
我希望向 Vue 页面添加背景颜色，更具体地说是渐变。不是所有的页面，只有一页。但是当我在 components/Frontpage.Vue 中写这个时
html
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
它不起作用，背景保持白色。但是当我将完全相同的代码放入 App.Vue 时，它可以完美运行。我可以通过导入外部 css 来解决这个问题。但是看起来不是很干净。有人有解决方案吗？
编辑：所以基本上：我必须把我的背景放进去，因为它只能显示在这个页面上。但是因为它是作用域的，所以我无法访问“html”元素。
非常感谢您阅读我的问题，即使您无法帮助我。这是我在 *** 上的第一篇文章！
【问题讨论】：
似乎在这里按预期工作：jsfiddle.net/cojz0rj1 是的，但是在 vue.js 中，来自 components/Frontpage.Vue 的代码在 App.Vue 中运行。我可以从 App.Vue 访问 html 标记，但不能从 components/Frontpage.Vue 访问。 哦，所以这是一个特异性问题？在这种情况下，如果您无法更改原始代码，则可能不得不求助于!important 之类的技巧。
我试过了，但我无法访问该元素。我无法向 html 元素添加任何 CSS。但我想解决方案将是一个特定的 Vue.js 技巧
【参考方案1】：
这可能是因为你在 style 标签中有 scoped 属性：
<style scoped>
html
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
</style>
https://vue-loader.vuejs.org/en/features/scoped-css.html
当一个标签有 scoped 属性时，它的 CSS 将只适用于当前组件的元素。
删除 scoped 属性以使您的 css 工作，或者如果您不希望每个 css 都没有作用域，您可以添加多个样式标签
<style>
html
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
</style>
<style scoped>
h1
color: white;
</style>
编辑1
为了让<html>在换页时使用不同的样式，
1。 vue-router 的 afterEach 钩子中的工具类
router.afterEach((to, from) =>
if (to.name === "page2")
document.querySelector("html").classList.add("page2");
else
document.querySelector("html").classList.remove("page2");
);
2。添加 html.page2 样式
<style>
html.page2
background-color: gray;
</style>
3。示例：
【讨论】：
太棒了！我确实使用 可以解决问题。非常感谢！ 嗯...，它没有工作。我将背景颜色设置为没有范围限制，因此它适用于 html 元素。但即使我在其他页面上将背景纠正为白色，背景仍保持蓝色。只有当我刷新页面时它才会再次变白。 所以基本上：我必须把我的背景放进去，因为它只能显示在这个页面上。但是因为它是作用域的，所以我无法访问“html”元素。【参考方案2】：您还可以使用 Vue 生命周期方法来添加或删除类。
created()
document.querySelector("html").classList.add("someClass");
,
destroyed()
document.querySelector("html").classList.remove("someClass");
然后确保将该 css 类放在作用域块之外的单独样式块中。
<style>
.someClass
background: red;
</style>
<style scoped>
... rest of your css
</style>
祝你好运！
【讨论】：
【参考方案3】：所以，感谢所有提供帮助的人，但我找到了解决方法。
我在 App.vue 中放了这个
*
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
这样我就不必访问 html 来编辑整个页面背景。 components/frontpage.vue 中最高的元素（这是一个大的）现在本身就是整页，所以现在我可以将我的背景放在标签中的这个元素上。
#Frontpage
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
现在我的页面有一个全屏蓝色背景，当我转到另一个页面时它会立即消失。无需刷新。
【讨论】：
以上是关于无法将背景颜色添加到 App.Vue 之外的 html 元素的主要内容，如果未能解决你的问题，请参考以下文章