Question

我正在尝试设置在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>"; 

}

Answer 1

使用纯Java脚本对元素进行样式设置的最简单方法如下：

document.getElementById("myDiv").style.borderColor = "red";

首先，您通过id获得该元素。您可以像这样给元素一个id：<div id="myDiv"></div>

然后，您可以使用document.getElementById()函数来获取元素。然后，您可以使用style对象设置样式。

但是最好的方法是仍然使用样式表或使用jQuery动态地完成它。

Answer 2

您应该做的是为document.getElementById("item-list")设置变量，然后添加.style.backgroundColor('white');或进行

document.getElementById("item-list").style.backgroundColor('white');

Answer 3

使用要设置的一组样式格式创建类。然后，您可以使用函数作为下面给出的示例：

function addClass() {
   var element = document.getElementById("myPara");
   element.classList.add("mystyle");
}
function removeClass() {
   var element = document.getElementById("myPara");
   element.classList.remove("mystyle");
}

Answer 4

要更改HTML元素的样式，请使用以下语法：

document.getElementById(id).style.property = new style

示例：在document.getElementById("item-list").style.color ='red';后面添加toDoItems.push(userInput);

Answer 5

只需将一个类添加到p元素并通过CSS对其设置样式

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

Answer 6

您可以在p标签中添加一个类名，并为该类编写CSS，这可能会对您有所帮助

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
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 class='className'>"+userInput+ "</p>"; 
}
});
</script>

<style> 
.className {
 border:1px solid #ccc;
}
</style>
</head>
<body>

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

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

    <div id="item-list">

    </div>

</body>
</html>

Answer 7

感谢我通过在段落标签中添加一个类来弄清楚了。

Answer 8

在这种情况下，使用innerHTML（innerHTML+=）是个坏主意。因为每次您单击按钮时，以前的p标签将被新的p替换。

第一步，添加具有以下功能的新todo：

    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的{{1}}形式传递样式，但是在第二种方法中，必须以{{1} }语法（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: "));
      }
  }

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

8 个答案: