编码练习：使用 JS 向网页中添加一个列表

kllo__

已于 2022-02-11 09:39:48 修改

阅读量691

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2022-02-10 17:26:09 首次发布

本文链接：https://blog.csdn.net/kllo__/article/details/122864179

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题

原始网页如下：

代码如下：以下分别是 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);

效果：

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编码练习：使用 JS 向网页中添加一个列表

问题原始网页如下：代码如下：以下分别是 html 和 css 代码<html> <head> </head> <body> <div id="content">ABC <br>Easy as <br>One, two, three</div><div id="infos"></div> </body></htm.
复制链接

扫一扫

专栏目录