Question

我有一个简单的表格，应该采用输入名称，并以一条消息的形式写出来，以此表示祝贺。表单似乎可以正常工作并将结果写到页面上，但是如果没有css的真正丑陋用法（只允许在文本上设置样式（没有设置背景，文本对齐中心等），我无法对它进行样式设置）。）。

这将脱机使用，因此ajax将不起作用。我希望可以用香草js或jquery完成。文档说的样式化javascript的方法似乎都不起作用。

function results() {
  var name= document.getElementById('name').value;

  document.write ("<h1 style='text-align: center;font-family: sans-serif;margin-top: 3em;margin-left: 20px;font-size: 72px;'>Swab barque interloper chantey doubloon starboard</h1>");
  document.write ("<span style='font-family: sans-serif;padding-left: 30%;font-size: 72px;'> "+ name +" </span>");
}

<form onsubmit="return results();" method="post">
    <h3>Enter Name</h3>
    <input id="name" type="text" name="name" />
    <input id="submit" type="submit" value="Enter" />
  </form>

Answer 1

只需提前在页面上设置CSS类，然后提供将由这些类生成的新HTML元素。

但是，实际上，您应该远离document.write()并仅创建要使用的元素并使用类设置它们的样式，但是默认情况下隐藏这些元素。然后，您只需在提交表单时取消隐藏它们即可。

您的代码使用的语法和模式（不幸的是）不会使他们在20多年前丧命。我们真的不再混合使用JavaScript和HTML，并且我们也非常努力地从HTML中删除CSS。我们将三种语言分开。您将在下面的代码中看到它。

最后，由于您实际上并未真正将数据提交到服务器，而只是在收集数据的同一页面上本地使用它，因此您实际上不应该使用submit事件，而应使用{{ 1}}的常规click事件。

button

// Get references to the HTML elements you'll want to work with
// outside of the callback function so you don't have to scan the
// document for them every time the function runs.

// Also, name is a property of the window object... It's a best-
// practice not to name things name to avoid conflicts.
let form = document.querySelector("form");
let btn = document.getElementById("submit");
let userName = document.getElementById('name');
let results = document.querySelector(".results");
let span = document.querySelector(".results > span");

// Don't set up your event handling in HTML. Do it in JavaScript
btn.addEventListener("click", showResults);

function showResults() {
  span.textContent = userName.value;
  results.classList.remove("hidden");  // Unhide the section
  form.classList.add("hidden");  // And hide the form
}

/* We can make a regular tag look like a heading without it being one: */
.questionTitle { font-weight:bold; }

/* Hide the results section by default */
.hidden { display:none; }

/* These classes will style the elements in the results */
.results > h1 {
  text-align: center;
  font-family: sans-serif;
  margin-top: 3em;
  margin-left: 20px;
  font-size: 72px;
}

.results > span {
  font-family: sans-serif;
  padding-left: 30%;
  font-size: 72px;
}

Answer 2

如果您想继续使用document.write，可以选择仅在已经编写的两个元素之前写出样式

下面是一个例子：[为了示例目的，我制作了丑陋的样式]

const style = `
  <style type='text/css'>
    h1{
      text-decoration: underline;
      text-decoration: italic;
      width: 50%;
      margin: auto;
    }
    span{
      border: 1px solid black;
      background-color: red;
      color: yellow;
      font-size: larger;
      display: block;
      text-align: center;
      transform: scale(1, -1);
    }
  </style>
`;

function results() {
  var name = document.getElementById('name').value;
  document.write(style);
  document.write("<h1>Swab barque interloper chantey doubloon starboard</h1>");
  document.write("<span> " + name + " </span>");
}

<form onsubmit="return results();" method="post">
  <h3>Enter Name</h3>
  <input id="name" type="text" name="name" />
  <input id="submit" type="submit" value="Enter" />
</form>

话虽如此，我建议您提前创建元素和样式，并简单地切换元素可见性并在需要时替换动态内容。

如何设置发布到页面上的表单结果的样式？

2 个答案: