问题
原始网页如下:
代码如下:以下分别是 html 和 css 代码
<html>
<head>
</head>
<body>
<div id="content">ABC
<br>Easy as
<br>One, two, three
</div>
<div id="infos"></div>
</body>
</html>
#content {
float: right;
margin-top: 100px;
margin-right: 50px;
}
最终实现效果:向网页中添加一个列表到指定位置
解决方法
使用 getComputedStyle() 方法返回了元素的所有 CSS 属性。
const styleElement = getComputedStyle(document.getElementById("content"));
const listElement = document.createElement("ul");
const heightElement = document.createElement("li");
heightElement.textContent = `Height : ${styleElement.height}`;
const widthElement = document.createElement("li");
widthElement.textContent = `Width : ${styleElement.width}`;
listElement.appendChild(heightElement);
listElement.appendChild(widthElement);
document
.getElementById("infos")
.appendChild(document.createTextNode("Information about the element"));
document.getElementById("infos").appendChild(listElement);
效果: