我如何使用JavaScript创建和风格(并追加到页面)一个div，与内容? 我知道这是可能的，但怎么做呢?
当前回答
下面是一个小例子，它使用了一些漂亮的可重用DOM实用函数:
// DOM utility functions: const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop), ELS = (sel, par) => (par ?? document).querySelectorAll(sel), EL = (sel, par) => (par ?? document).querySelector(sel); // Task: const EL_new = ELNew("div", { className: "item", textContent: "Hello, World!", onclick() { console.log(this.textContent); }, style: ` font-size: 2em; color: brown; background: gold; ` }); // Append it EL("body").append(EL_new);
此外，你还可以使用Object.assign()对元素进行样式化，如下所示:
// Add additional styles later:
Object.assign(EL_new.style, {
color: "red",
background: "yellow",
fontSize: "3rem",
});
其他回答
虽然其他答案在这里工作，我注意到您要求一个div与内容。所以这是我的版本，有额外的内容。JSFiddle链接在底部。
JavaScript(带注释):
// Creating a div element
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
divElement.style.paddingTop = "15px";
// Adding a paragraph to it
var paragraph = document.createElement("P");
var text = document.createTextNode("Another paragraph, yay! This one will be styled different from the rest since we styled the DIV we specifically created.");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button, cause why not!
var button = document.createElement("Button");
var textForButton = document.createTextNode("Release the alert");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
HTML:
<body>
<h1>Title</h1>
<p>This is a paragraph. Well, kind of.</p>
</body>
CSS:
h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }
p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }
注意:CSS线条借用Ratal Tomal
JSFiddle: https://jsfiddle.net/Rani_Kheir/erL7aowz/
这取决于你怎么做。纯javascript:
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
使用jquery做同样的事情非常简单:
$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');
干杯!
你可以这样做
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);
完整的可运行代码片段: var董事会; 董事会= document.createElement (" div "); 董事会。id = "主板"; board.style.cssText = "位置:固定;高度:100px;宽度:100px;背景:#ddd;" . getelementbyid(“主要”).appendChild(板); 身体< > < div id = "主" > < / div > 身体< / >
你可以使用下面的方法:
document.write()
这是非常简单的，在下面的文件我解释
document.write("<div class='div'>Some content inside the div (It is styled!)</div>") .div { background-color: red; padding: 5px; color: #fff; font-family: Arial; cursor: pointer; } .div:hover { background-color: blue; padding: 10px; } .div:hover:before { content: 'Hover! '; } .div:active { background-color: green; padding: 15px; } .div:active:after { content: ' Active! or clicked...'; } <p>Below or above well show the div</p> <p>Try pointing hover it and clicking on it. Those are tha styles aplayed. The text and background color changes.</p>
我喜欢做的另一件事是创建一个对象，然后循环遍历对象并设置样式，因为逐个编写每个样式会很乏味。
var bookStyles = {
color: "red",
backgroundColor: "blue",
height: "300px",
width: "200px"
};
let div = document.createElement("div");
for (let style in bookStyles) {
div.style[style] = bookStyles[style];
}
body.appendChild(div);
