传智播客旗下高端IT在线教育平台|咨询热线:010-56288220

返回顶部 返回列表
334 0

[Web专区] 前端体验班学习笔记十七(0812)

[复制链接]

45

主题

47

帖子

189

积分

注册会员

云朵777

Rank: 2

积分
189
3340 云朵777 发表于 2017-8-12 22:08:51
本帖最后由 云飞 于 2017-8-18 16:01 编辑

一. 获取样式属性

例:
<script>
        var box = document.getElementById("box");
        //console.log(box.style.width);  //style属性对应的是标签的style属性
        //style对象中的样式属性 对应的是  行内的样式属性
        console.log(box.style.width);
        //通过style对象中的属性获取到的值 只有当前样式属性的值的部分 而且是字符串 而且有单位
</script>


二. 设置样式属性
例:
<script>
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        btn.onclick = function(){
        //是字符串 有单位 而且只要这个属性的值
        //是字符串 有单位
        box.style.width = "200px";
        box.style.height = "200px";
        box.style.backgroundColor = "red";
        

        }
</script>

三.动态创建文本框
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset = "UTF-8">
        <title></title>
</head>

<sctipt>
        var btn = document.getElementById("btn");
        var box  = document.getElementById("box");
        btn.onclick = function(){
                //先判断  ,如果没有才创建,有就不重复创建了
                var input = document.getElementById("t");
                //如果有就是对象,如果没有就是null
                if(input){

                        //如果能进来,说明是对象,也就是找到了
                        return;        
                }

                var input = document.createElement("input");
                input.id = "t";
                input.type = "text";
                box.appendChild(input);


        };

        
</sctipt>
<body>
        
</body>
</html>






回复

您需要登录后才可以回帖 登录 | 立即注册