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

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

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

所以我在JavaScript中创建了一个段落元素，我正在尝试使用JS来设置它的样式。

我的网页：

<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>"; 
}

在这种情况下使用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>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>

使用纯 Javascript 设置元素样式的最简单方法是：

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

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

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

但是最好的方法是仍然使用样式表或使用jQuery动态执行此操作。

你应该做的是为document.getElementById("item-list")创建变量，然后添加.style.backgroundColor('white');或者你可以做

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

使用您想要执行的一组样式格式创建类。然后你可以使用函数，如下例所示：

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

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

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

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

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

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

你可以给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>

谢谢，我通过在段落标签中添加一个类来解决这个问题。

相关内容

最新更新

热门标签：