Javascript 如何将 CSS 应用于 HTML body 元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2582551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 01:01:10  来源:igfitidea点击:

How to apply CSS to HTML body element?

javascripthtmlxhtmlcss

提问by Manohar

I am trying to get rid of this:

我试图摆脱这个:

document.body.className = "someclass";

I want to do this in CSS.

我想在 CSS 中做到这一点。

body.someclass {
.
.
.
}

unfortunately I am not able to get this working in Firefox, chrome.

不幸的是,我无法在 Firefox、chrome 中使用它。

Am I doing anything wrong here? Is there any way we could apply a CSS class to body?

我在这里做错了什么吗?有什么办法可以将 CSS 类应用于 body?

回答by Dominik Honnef

You are doing two different things there. Your JavaScript is actually assigning the class "someclass" to your body element, while your CSS is stylinga body element with the class "someclass", it won't assign the class to it, that is not the task of CSS. You would do it in plain (X)HTML like this:

你在那里做两件不同的事情。您的 JavaScript 实际上是将类“someclass”分配给您的 body 元素,而您的 CSS 正在使用类“someclass”为 body 元素设置样式,它不会将类分配给它,这不是 CSS 的任务。您可以像这样在纯 (X)HTML 中执行此操作:

<body class="someclass">

回答by Alex Mcp

Part of the problem is that valid XHTML can only have one <body>element per document. A class is generally ascribed to an element that occurs multiple times (or, rather, to a style that you want applied multiple times).

部分问题是有效的 XHTML<body>每个文档只能有一个元素。类通常归因于多次出现的元素(或者更确切地说,归因于您想要多次应用的样式)。

SINCE there's only ever one body, I've never added an ID or a class to it. Just style:

由于只有一个主体,因此我从未向其添加 ID 或类。只是风格:

body {
    background-color: red;
}

If you have a class you want to reuse, use a comma in your selector:

如果您有一个要重用的类,请在选择器中使用逗号:

.coolStyle, body {
    font-weight: bold;
    color: red;
    text-decoration: blink;
}

All of this is potentially meaningless, however, because anything applied to the <body>tag will be inherited by its children unless explicitly styled otherwise.

然而,所有这些都可能毫无意义,因为<body>除非明确指定样式,否则应用于标签的任何内容都将被其子标签继承。

回答by Hultner

There is no need for a class on body since you will only have one body in your document. Unless maybe you want to change the style of the body by changing with JavaScript class for some reason.

不需要 body 类,因为您的文档中只有一个 body。除非您出于某种原因想通过更改 JavaScript 类来更改正文的样式。

If you have to put a class on body do it like this:

如果您必须在 body 上添加一个类,请这样做:

<body class="someclass">

And then access the class and modify the style in your css like this:

然后访问该类并修改 css 中的样式,如下所示:

body.someclass{
  ...(style parameters goes here)
}

However you can change the style of all elements of a tag and since you will only have one body you could simply add this to the css:

但是,您可以更改标签的所有元素的样式,并且由于您只有一个主体,因此您可以简单地将其添加到 css 中:

body{
  ...(style parameters)
}

And not add anything to the html. However with reoccuring tags do use class for a style that will be used several times and id for a style that will only be used one time on a page. You assign an id to a tag like this in the html:

并且不向 html 添加任何内容。然而,对于重复出现的标签,确实将 class 用于将被多次使用的样式,并将 id 用于仅在页面上使用一次的样式。您在 html 中为这样的标签分配一个 id:

<tag id="someid">