点击按钮变换属性：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->

  <title>控制div属性</title>

  <style>

    #outer {

      width: 500px;

      margin: 0 auto;

      padding: 0;

      text-align: center;

    }

    #div1 {

      width: 100px;

      height: 100px;

      background: #000;

      margin: 10px auto;

    }

  </style>

  <script>

    var changeStyle = function (elem, attr, value) {

      elem.style[attr] = value

    };

    window.onload = function () {

      var oBtn = document.getElementsByTagName("input");

      var oDiv = document.getElementById("div1");

      var oAtt = ["width", "height", "background", "display", "display"];

      var oVal = ["200px", "200px", "red", "none", "block"];

      for (var i = 0; i < oBtn.length; i++) {

        oBtn[i].index = i;// 循环为每个按钮添加onclick事件函数的同时，为该按钮储存了一个变量，可以让onclick事件函数调用，通过js闭包实现私有变量？
        oBtn[i].onclick = function () {

          this.index == oBtn.length -1 && (oDiv.style.cssText = "");

          changeStyle(oDiv, oAtt[this.index], oVal[this.index])

        }

      }

    }

  </script>

</head>

<body>

  <div id="outer">

    <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>

<button>和<input type="button">区别

<button>标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

background属性

如何在一个声明中设置所有背景属性：

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip控制
  • background-attachment
  • background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

class属性 和 id属性

class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

div是块级元素。

 &&简写

this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

changeStyle(oDiv, oAtt[this.index], oVal[this.index])

等同于

if (this.index == oBtn.length - 1) {

  oDiv.style.cssText = " ";

} else {

  changeStyle(oDiv, oAtt[this.inde], oVal[this.index])

 }

第一课 1) 控制div属性 总结的更多相关文章

  1. 原生Javascript实现控制DIV属性

    写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...

  2. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  3. 控制DIV属性——实现盒子长、宽、背景等变化

    写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...

  4. 01 使用JavaScript原生控制div属性

    写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...

  5. 控制div属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Spring第一课:IOC控制反转，什么是反转，什么又是控制？

    前言 学习Spring第一课,就是认识IOC控制反转,要了解它还真得花一些功夫.今天主要理解透彻它的真谛,而不仅限于表面. 上道小菜 public class BusinessService { pr ...

  7. 作品第一课----循环改变DIV颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js项目练习第一课

    控制div属性 <style> .c1 { width:200px; height:200px; background-color: #000; display: block; margi ...

  9. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

随机推荐

  1. lucene全文搜索之一：lucene的主要功能和基本结构（基于lucene5.5.3）

    前言:lucene并不是像solr或elastic那样提供现成的.直接部署可用的系统,而是一套jar包,提供了一些常见语言分词.构建索引和创建搜索器等等功能的API,我们常用到的也就是分词器.索引目录 ...

  2. MACOS关闭指定端口

    因为用IDEA写项目的时候,有的时候结束Jetty导致端口没有释放,所以会出现占用的情况. MacOS结束端口占用进程的命令,和Linux的一样.先执行如下命令: lsof -i:8080 会有类似下 ...

  3. Thinkphp 3.0-3.1版代码执行漏洞

    近日360库带计划中播报的ThinkPHP扩展类库的漏洞已经查明原因:系官方扩展模式中的Lite精简模式中存在可能的漏洞(原先核心更新安全的时候 并没有更新模式扩展部分,现已更新).对于使用标准模式或 ...

  4. SQLServer数据库操作

    --创建数据库create database 在线考试系统on(name=在线考试系统_DATA,filename='E:\DB\在线考试系统_DATA.mdf',size=5mb,maxsize=2 ...

  5. 处理jQuery append加入的元素 绑定事件无效的方法

    通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...

  6. 《JavaScript高级程序设计》笔记二

    第二章 在HTML中使用JavaScript 要想把JavaScript放到网页中,就必须涉及到Web的核心语言HTML.向HTML页面中插入JavaScript的主要方法,就是使用<scrip ...

  7. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  8. USACO Healthy Holsteins

    首先看题目: Healthy HolsteinsBurch & Kolstad Farmer John prides himself on having the healthiest dair ...

  9. WPF 杂谈——Trigger触发器

    笔者在使用的WPF过程中,见过的触发器有三种:Trigger.DataTrigger.EventTrigger.其中最为常用的要属Trigger.至于触发器的作用就是当某个属性的值发生变化,应该去做某 ...

  10. ListView 介绍

    1. 通过继承Activity实现ListView 1.1 在XML布局文件中实现一个ListView <ListView android:layout_width="wrap_con ...