标签的样式

最新推荐文章于 2024-06-13 23:29:27 发布

SpringYoungYu

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量384

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44917015/article/details/111830756

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            width: 50px;
            height: 50px;
            background-color: red;
        } */
    </style>
</head>

<body>
    <div>
        <input type="checkbox" name="" id="">
    </div>
    <script>
        
        // 设置标签属性
        // div.setAttribute('style',"width:50px;height:50px;background-color:red")
        // 设置对象属性
        // div.style = "width:50px;height:50px;background-color:red"
        // console.log( document.styleSheets ) //获取层叠样式表

        // 通过js也可以来写出css样式 不仅仅是行内样式

        // 你能成功也就一句话 事情到我为止 尽量
        // console.log( div.style.width )
        // 获取样式属性 但是只能获取行内样式 写在层叠样式表中的无法获取
        // 无法获取css树种的样式 行内样式是dom树上的样式
        // dom树上的样式优先级更高 而不是覆盖 
        // console.log(div.style.width)//dom还没有渲染完 所以无法获取到
        // console.log(getComputedStyle(div).width)//这样才能获取到 渲染后的结果 这个方法属于window的方法
        // getComputedStyle 具备兼容问题 火狐谷歌 兼容 ie不可以 ie8版本及以下不可以

        // console.log( div.currentStyle.width )//ie可以你试试

        /* 
        参数
        type 要创建的元素的类型 div  ul img
        style object对象 样式对象
        parent 父元素对象 需要将创建好的元素放在谁的里面
        prop object对象 dom对象属性
        抽象方法 由参数决定
        */
        function ce(type, style, parent, props) {
            let elem = document.createElement(type)
            for (let prop in style) {
                elem.style[prop] = style[prop]
            }
            for (let prop in props) {
                elem[prop] = props[prop]
            }
            if (parent) parent.appendChild(elem)
            return elem
        }
        let style = {
            width: "50px",
            height: "50px",
            backgroundColor: "pink"
        }

        // for (var i = 0; i < 100; i++) {
        //     ce("div", {
        //         width: "50px",
        //         height: "50px",
        //         backgroundColor: randomColor()
        //     }, document.body)
        // }

        for (var i = 0; i < 100; i++) {
            ce("input", null, document.body,{
                type:"checkbox",
                checked:Math.random() > 0.5
            })
            ce("br", null, document.body,{
            })
        }
        // console.log( ce("div",style,document.body) )
        function randomColor() {
            let col = "#"
            for (var i = 0; i < 6; i++) {
                col += Math.floor(Math.random() * 16).toString(16)
            }
            return col;
        }

        // console.log( Math.random() > 0.5  ) //随机
    </script>
</body>

</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签的样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* div {
复制链接

扫一扫