【JS】使用ES6 class方式向页面中追加图片

最新推荐文章于 2023-09-13 15:50:20 发布

蘑菇栗子

最新推荐文章于 2023-09-13 15:50:20 发布

阅读量217

点赞数

分类专栏： js小实例/小功能

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126438146

版权

JavaScript DOM元素节点创建属性设置样式应用

关键词由CSDN通过智能技术生成

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

JS

class Element {
			//追加的节点名称，节点属性，节点样式，追加的位置
            constructor(tag, attr, style, father) {
                //添加节点
                this.createTag(tag);
                //添加属性
                this.setAttr(attr);
                //添加样式
                this.setStyle(style)
                //追加到父节点
                this.append(father)
            }
            //添加节点
            createTag(tag) {
                this.newTag = document.createElement(tag);
                console.log(this.newTag);

            }
            //添加属性
            setAttr(attr) {
                for (let n in attr) {
                    this.newTag[n] = attr[n];
                }
            }
            //添加样式
            setStyle(style) {
                for (let i in style) {
                    this.newTag.style[i] = style[i];
                }
            }
            //追加到父节点
            append(father) {
                father.appendChild(this.newTag);
            }

        }

        new Element("img",
            { src: "../images/1.jpg" },
            { opacity: 0.6, borderRadius: "50%",height:"500px" },
            document.body
        )