时间戳

首页 > 解决方案 > 如何设置在 JS 中创建的段落元素的样式

javascript - 如何设置在 JS 中创建的段落元素的样式

问题描述

我正在尝试设置我在 JavaScript 中创建的段落元素的样式。

我正在开发一个简单的待办事项列表，以便提高我的技能。

因此，我在 JavaScript 中创建了一个段落元素，并尝试使用 JS 对其进行样式设置。

我的 HTML： 

<head>

    <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="css/style.css">    


    <title>To Do List</title>

</head>

<body>

    <h1>My Tasks</h1>
    <h4><span id="number1"></span> tasks</h4>

    <button id="addItem">Add item</button>

    <div id="item-list">

    </div>

    <script src="js/script.js"></script>

</body>

我的 JS：

var toDoItems = [];
var i = 1;

document.getElementById("addItem").onclick = function (){

var userInput = prompt("Enter your Todo: ")

toDoItems.push(userInput);

document.getElementById("item-list").innerHTML += "<p>"+userInput+ "</p>"; 

}

标签： javascripthtmlcss

解决方案

innerHTML在这种情况下使用( innerHTML+=) 是一个坏主意。因为每次单击按钮，以前的p标签都会被新的标签替换p。

在第一步中，todo使用类似以下的函数添加新的 s：

    var List=document.getElementById("item-list");
    function AddNewTodo(t, styles/*{style1: "value",...}*/){
       var todo=document.createElement("p");
       todo.innerHTML=t;
       for(var s in styles) todo.style[s]=styles[s];
       List.appendChild(todo);
    }

真实样本：

  window.onload=function(){
      var List=document.getElementById("item-list");
      function AddNewTodo(t, styles/*{style1: "value",...}*/){
         var todo=document.createElement("p");
         todo.innerHTML=t;
         for(var s in styles) todo.style[s]=styles[s];
         List.appendChild(todo);
      }

      document.getElementById("addItem").onclick = function (){
      AddNewTodo(prompt("Enter your Todo: "), 
        {color: "#900", display: "list-item", listStyle: "inside", paddingLeft: "20px"});
      }
  }
<h1>My Tasks</h1>
<h4><span id="number1"></span> tasks</h4>
<button id="addItem">Add item</button>
<div id="item-list">
</div>

但是您可以使用stylesheet而不是inline style. 为此，只需像这样更改您的功能：

window.onload=function(){
  var List=document.getElementById("item-list");
  function AddNewTodo(t, styles/*{"simple style name": "simmple css value",...}*/){
       var s=document.createElement("style");
       document.head.appendChild(s);
       var sty="";
       for(var st in styles) sty+=st+":"+styles[st]+";";
       s.sheet.insertRule("#item-list>p{"+sty+"}", 0);
       var todo=document.createElement("p");
       todo.innerHTML=t;
       List.appendChild(todo);
  };
  document.getElementById("addItem").onclick=function(){
    AddNewTodo(
      prompt("Enter your Todo:"),
      {"background-color": "#f0f0f0", display: "list-item", "list-style": "inside", padding: "15px"}
    );
  };
};
<h1>My Tasks</h1>
<h4><span id="number1"></span> tasks</h4>
<button id="addItem">Add item</button>
<div id="item-list">
</div>

小费：

在第一种方法中，您必须将样式作为CamelCase类似的js语法 ( border-top> borderTop) 传递，但在第二种方法中，将它们像css语法 ( border-top, background-color,...) 一样传递。

另一种方式：

您可以style在style标签中定义：

<style type='text/css'>
  #item-list>p{
      color: #f90;
      /*other styles*/
  }
</style>

在这种情况下，您的功能将与此类似：

function AddNewTodo(t){
   var todo=document.createElement("p");
   todo.innerHTML=t;
   List.appendChild(todo);
}

完整样本：

window.onload=function(){
      var List=document.getElementById("item-list");
      function AddNewTodo(t){
         var todo=document.createElement("p");
         todo.innerHTML=t;
         List.appendChild(todo);
      }

      document.getElementById("addItem").onclick = function (){
          AddNewTodo(prompt("Enter your Todo: "));
      }
  }
#item-list>p{
  color: "#900";
  display: list-item;
  list-style: inside;
  padding-left: 20px
}
<h1>My Tasks</h1>
<h4><span id="number1"></span> tasks</h4>
<button id="addItem">Add item</button>
<div id="item-list">
</div>

推荐阅读