如何使用 JavaScript 创建和设置 div 样式？

javascript

2022-08-30 01:20:39

如何使用 JavaScript 创建包含内容的 div 并设置其样式（并附加到页面）？我知道这是可能的，但如何做到呢？

答案 1

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);

<body>
<div id="main"></div>
</body>

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);
OR
document.body.appendChild(div);

使用父引用而不是。document.body

答案 2

这取决于你如何做到这一点。纯 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');

干杯！