操作属性：

对象.setAttribute('属性名','值'); - 添加属性
对象.getAttribute('属性名'); - 获取属性值，如无此属性，那么返回null

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        .div1 {

            width: 100px;

            height: 50px;

            float: left;

            margin-right: 10px;

        }

    </style>

</head>

<body>

    <div class="div1" dd=""></div>

    <div class="div1" dd=""></div>

    <div class="div1" dd=""></div>

    <div class="div1" dd=""></div>

    <div class="div1"></div>

    <div class="div1"></div>

</body>

</html>

<script type="text/javascript">

    var aa = document.getElementsByClassName("div1");

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

        if (aa[i].getAttribute("dd") == "")

            aa[i].style.backgroundColor = "green";

        else if (aa[i].getAttribute("dd") == "")

            aa[i].style.backgroundColor = "yellow";

        else

            aa[i].style.backgroundColor = "red";

    }

</script>

对象.removeAttribute('属性名'); - 移除属性

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <input type="button" value="按钮111" id="dd1" />

    <input type="button" value="按钮222" id="dd2" />

</body>

</html>

<script type="text/javascript">

    var aaa = document.getElementById("dd1");

    var bbb = document.getElementById("dd2");

    //按钮111的点击事件

    aaa.onclick = function () {

        //按钮111添加一个属性不可用

        this.setAttribute("disabled", "disabled");

        //获取aaa中属性value的值

        var ccc = this.getAttribute("value");

        alert(ccc);

    }

    //bbb的点击事件

    bbb.onclick = function () {

        //移除aaa的disabled属性

        aaa.removeAttribute("disabled");

    }

</script>

2.验证5+5=？

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    +=

    <input type="text" id="dd1" data="" />

     <input type="button" id="dd2" value="验证"/>

</body>

</html>

<script type="text/javascript">

    var aaa = document.getElementById("dd1");

    var bbb = document.getElementById("dd2");

    //按钮111的点击事件

    //bbb的点击事件

    bbb.onclick = function () {

        var txt = aaa.getAttribute("data");

        if (txt == aaa.value)

            alert("正确");

        else

            alert("笨蛋");

    }

</script>

3.彩虹导航栏，移入变为灰色，移除变为原来的颜色。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        .div1 {

            width: 100px;

            height: 50px;

            float: left;

            margin-right: 10px;

        }

    </style>

</head>

<body>

    <div class="div1" style="background-color: red" dd="red"></div>

    <div class="div1" style="background-color: blue" dd="blue"></div>

    <div class="div1" style="background-color: green" dd="green"></div>

    <div class="div1" style="background-color: pink" dd="pink"></div>

    <div class="div1" style="background-color: purple" dd="purple"></div>

    <div class="div1" style="background-color: yellow" dd="yellow"></div>

</body>

</html>

<script type="text/javascript">

    var aaa = document.getElementsByClassName("div1");

    //中间变量存颜色

    var color;

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

        //鼠标移入事件

        aaa[i].onmouseover = function () {

            color = this.style.backgroundColor;

            this.style.backgroundColor = "gray";

        }

        //鼠标移除事件

        aaa[i].onmouseout = function () {

            this.style.backgroundColor = color;

        }

        //鼠标点击事件

    }

</script>

定时器：
window.setTimeout(function(){},间隔时间毫秒);
- 定时炸弹，延迟执行，只执行一次

window.setInterval(function(){},间隔的时间毫秒);
- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
- 它是有返回值的，可以用一个变量来接收这个定时器对象

window.clearInterval(要关闭的定时器对象);
一旦执行这句代码，会立刻停止此定时器对象的执行

对象.offsetWidth

JS——操作属性的更多相关文章

  1. js 操作属性

    操作属性: 对象.setAttribute('属性名','值'); - 添加属性 对象.getAttribute('属性名'); - 获取属性值,如无此属性,那么返回null 对象.removeAtt ...

  2. js 操作属性，操作内容，

    disable=“disable” 让按钮变得不可选 先建一个按钮,让class = ’btn‘ 然后, 添加,修改属性 document.getElementsByClassName('btn')[ ...

  3. document--文档中的操作，操作属性、操作样式、操作元素

    ---恢复内容开始--- document操作:    1.找元素   getE..    2.操作内容   非表单:innerHtml   表单:value    3.操作属性            ...

  4. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  5. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  9. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 读书笔记 effective c++ Item 9 绝不要在构造函数或者析构函数中调用虚函数

    关于构造函数的一个违反直觉的行为 我会以重复标题开始:你不应该在构造或者析构的过程中调用虚函数,因为这些调用的结果会和你想的不一样.如果你同时是一个java或者c#程序员,那么请着重注意这个条款,因为 ...

  2. java多线程安全问题 静态函数的修饰

    /* 如果同步函数被静态修饰后,使用的锁是什么呢? 通过验证,发现不在是this.因为静态方法中也不可以定义this. 静态进内存是,内存中没有本类对象,但是一定有该类对应的字节码文件对象. 类名.c ...

  3. intellij IDEA mybatis插件破解方法

    1>安装mybatis插件,找到mybatis_plus.jar包的位置,在C:\Users\LZHL\.IntelliJIdea2016.3\config\plugins\mybatis_pl ...

  4. 【译文】用Spring Cloud和Docker搭建微服务平台

    by Kenny Bastani Sunday, July 12, 2015 转自:http://www.kennybastani.com/2015/07/spring-cloud-docker-mi ...

  5. 使用Nuget管理dll

    前言 nuget 已经不是什么新东西,它是vs的一个扩展工具,可以让我们在项目中添加.删除.更新引用变得更加快捷方便.现在有许多传统公司对dll的管理还是很落后的,有些甚至时通过发送dll文件,这样做 ...

  6. 每天一个Linux命令（10）--cat命令

    --首先,恭喜你,这是第十个命令啦. --为啥第十个就要恭喜?没啥特别呀? --因为逢十进一啊! cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或 ...

  7. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  8. c3p0获取连接Connection后的Close()---释疑

    论题: java c3p0获取连接Connnection 之后, 调用 con.close( ) 是否真的关闭了物理连接 ? 简答: c3p0采用连接池, 目的就是提前预置一定数量的连接, 在使用时候 ...

  9. 裸机（Bare Metal）安装CoreOS

    本文以 1235.9.0-stable 为例,在WMWare中进行安装. 1.获取安装资源 https://coreos.com/releases/ 通过"Browse Images&quo ...

  10. iOS实现视频和图片的上传

    关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...