你好,游客 登录 注册 搜索
背景:
阅读新闻

使用JavaScript原生控制div属性

[日期:2017-12-29] 来源:Linux社区  作者:yypbingo [字体: ]

写在前面:

因对前端开发感兴趣,于是自学前端技术,现在已经会HTML、CSS、JavaScript基础技术。但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长。文章记录自己的所思所想,以及借鉴前端大牛的思路,谨个人想法,存在不足,欢迎指正。

项目介绍:
  从最简单的开始,在网上找到了一个简单的用JS控制DIV属性的小项目,咋一看很简单,自己动手之后才发现自己的代码之冗余和初阶,深深汗颜。先写自己想法路程,然后把大牛源码奉上,涉及相关知识点一一记录。

项目效果图

01 控制div的属性

整体思路,先变量保存属性,然后写方法复用,遍历数组,添加方法,对重置的元素用&&判断并使用cssText方法。
不多说,上源码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div的属性</title>
    <style>
        #outer {
            width: 500px;
            height: 500px;
            margin: 100px auto 0;
            padding: 0;
            text-align: center;
            border: 15px solid #FBB03B;
            outline: 15px solid #709080;
            border-radius: 1em;
        }

        h1 {
            color: #FBB03B;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background: #F5F5D5;
            margin: 10px auto;
            display: block;
        }

        input {
            border: 1px solid #FBB03B;
            padding: 8px 20px;
            color: #FBB03B;
            background: #fff;
            font-family: "微软雅黑";
            outline: none;
            cursor: pointer;
        }

        input:hover {
            background: #FBB03B;
            color: #fff;
        }
    </style>
    <script>
        // 创建改变样式的函数
        var changeStyle = function(elem, attr, value) {
            elem.style[attr] = value;
        };

        window.onload = function() {
            // 获取每一个input标签
            var oBtn = document.getElementsByTagName("input");

            // 获取要改变的div盒子
            var oDiv = document.getElementById("div1");

            // 建立一个二维数组分别存放每个按钮要改变的属性和属性值
            var oAtt = ["width", "height", "background", "display", "display"];
            var oVal = ["300px", "300px", "#709080", "none", "block"];

            // 遍历input标签
            for(var i = 0; i < oBtn.length; i++) {

                // 设置对应的index
                oBtn[i].index = i;

                // 绑定按钮点击事件
                oBtn[i].onclick = function() {

                    // 重置按钮,清空之前的样式
                    this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

                    // 调用changeStyle函数,当前按钮点击后,更改对应的样式
                    changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
                }
            }
        }   
    </script>
</head>
<body>
    <div id="outer">
        <h1>控制div属性</h1>
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div id="div1"></div>
    </div>
</body>
</html>

1. CSS样式:

实现多重边框,使用outline方案。
在某些情况下,你可能只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性来产生外层的边框。描边的好处在于,你可以通过outline-offset属性来控制它跟元素的边缘之间的间距,这个属性可以接受负值。

2. JavaScript方法:

  1. cssText()定义和用法:
    cssText 属性设置或返回作为字符串的样式声明的内容。

  2. this.index==oBtn.length-1 &&(oDiv.style.cssText="");
    是指前半句this.index==oBtn.length-1为true时,执行下半句,也就是当遍历到重置按钮时,先清除之前添加的样式

tips:&&和||在javascript中的另类用法

a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;

a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;

&& 优先级高于 ||


console.log((1 && 3 || 0) && 4);     // 结果4 ①
console.log(1 && 3 || 0 && 4);      // 结果3 ②
console.log(0 && 3 || 1 && 4);      // 结果4 ③

分析
语句①:1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4
语句②:先执行1&&3 返回3,在执行0&&4返回0,最后执行结果比较 3||0 返回 3
语句③:先执行0&&3 返回0,在执行1&&4返回4,最后执行结果比较 0||4 返回 4

注:非0的整数都为true,undefined、null和空字符串”" 为false。

总结:

这算是最最基础的js练习了,模仿过一遍熟悉了通过js控制css样式改变。

本文永久更新链接地址http://www.linuxidc.com/Linux/2017-12/149943.htm

linux
相关资讯       JavaScript控制div属性 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款