从 HTML 更改“Div”属性答案

【问题标题】：Changing 'Div' Property from HTML从 HTML 更改“Div”属性
【发布时间】：2014-05-09 07:14:40
【问题描述】：

我正在使用StackEdit（这太棒了！）。
它具有导出文档的 HTML 文件的功能。
该文档使用默认的CSS File。

例如，我下载了带有以下代码的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>

<p>We’re dealing with…</p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

如果'div'元素的ID为“container”，我想做的是更改背景颜色：“容器”而不更改他的任何其他属性。

我只能访问基本模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>

我怎样才能以最简单的方式做到这一点？

注意事项：

我只能编辑模板。
我想把颜色改成f6f7f9。
我希望保留元素的任何其他属性。

更新

在上面的示例代码中尝试了您的建议：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>

<p>We’re dealing with…</p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

它不起作用，它会改变文档的整体外观。
您可以尝试通过创建本地 HTML 文件来查看。 -> 我错了。有效！

【问题讨论】：

嗯...#container{background:yellow;} ?
@Banana，我该把这行放在模板的什么位置？我只能编辑模板。
哦，我明白了，好的，我会发布答案
@Banana，我添加了“注释”。谢谢。

标签： html css stackedit

【解决方案1】：

如果您只能编辑模板，请使用如下内联样式：

<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>

或者由于您的模板是整个页面，您可以在头部添加自定义样式并使用 !important 指令覆盖任何其他自定义样式。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>
            <%= documentHTML %>
        </title>
        <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
        <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
        <style type="text/css">
            .container {
                background-color:#f6f7f9 !important;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <%= documentHTML %>
        </div>
    </body>

</html>

【讨论】：

它会保留所有其他属性吗？
是的，它只会改变样式背景颜色，没有别的。
由于某种原因，它不起作用。你可以试试我在模板上方发布的示例代码吗？它改变了整个外观。
我确实在你的代码上使用了它，我只是使用了一个代码格式化程序让它看起来很漂亮，它不小心在<%=d ocumentHTML %> 中添加了一个空格，我现在修复了它:)
我看到如果你使用内联样式，文本会消失，这不应该发生。它最有可能是 StackEdit 的问题，但如果您添加“color:auto;”，它可以很容易地修复。 style="background-color:#f6f7f9; color:auto;"

【解决方案2】：

将样式background-color:yellow; 添加到container div。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:yellow;"><%= documentHTML %></div>
   </body>
</html>

【讨论】：

【解决方案3】：

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><%= documentTitle %></title>
  <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
  <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
  <style>
  .container
  {
    background:#f6f7f9;
  }
  </style>
 </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;">    <%= documentHTML %></div>
   </body>
</html>

【讨论】：

【解决方案4】：

试试这个：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
   </body>
</html>

【讨论】：