无法将背景颜色添加到 App.Vue 之外的 html 元素答案

【问题标题】：Cannot add a background color to html element outside of App.Vue无法将背景颜色添加到 App.Vue 之外的 html 元素
【发布时间】：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”元素。

非常感谢您阅读我的问题，即使您无法帮助我。这是我在 StackOverflow 上的第一篇文章！

【问题讨论】：

似乎在这里按预期工作：jsfiddle.net/cojz0rj1
是的，但是在 vue.js 中，来自 components/Frontpage.Vue 的代码在 App.Vue 中运行。我可以从 App.Vue 访问 html 标记，但不能从 components/Frontpage.Vue 访问。
哦，所以这是一个特异性问题？在这种情况下，如果您无法更改原始代码，则可能不得不求助于!important 之类的技巧。
我试过了，但我无法访问该元素。我无法向 html 元素添加任何 CSS。但我想解决方案将是一个特定的 Vue.js 技巧

标签： css vue.js vuejs2 vue-component

【解决方案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;
}

现在我的页面有一个全屏蓝色背景，当我转到另一个页面时它会立即消失。无需刷新。

【讨论】：