码迷,mamicode.com
首页 > 其他好文 > 详细

2017-3-31 操作属性 定时器 操作内容 操作相关元素 元素创建添加删除

时间:2017-03-31 21:39:00      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:utf-8   window   element   type   tno   tin   ext1   code   定时   

(一)操作属性

1.对象.setAttribute(‘属性名‘,‘属性值‘);  --- 添加属性

  例子:把所有class为div的,字体改为30px;

      var a document.getElementById(‘div‘);

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

        a[i].setAttribute(‘style‘,‘font-size=30px‘);或者用a[i].style.fontSize=‘30px‘;

      }

2.对象.getAttribute(‘属性名‘); - 获取属性值,如无此属性,那么返回null

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

  例子1:设置2个按钮,第一个不能点击,点击第二个,解锁第一个,可以点击

      

<!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="第一个按钮" disabled="disabled" id="but1"/>
    <input type="button" value="第二个按钮"  id="but2"/>
</body>
</html>
<script type="text/javascript">
    document.getElementById(‘but2‘).onclick = function () {
        var a = document.getElementById(‘but1‘);
        a.removeAttribute(‘disabled‘);
    }

</script>

  例子2.判断2个数的和是否正确

  

<!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>
    5+5
    <input type="text" da="10" id="text1" value=""/>
    <input type="button" id="but1" value="验证"/>
</body>
</html>
<script type="text/javascript">
    var a = document.getElementById(but1);
    var b = document.getElementById(text1);
    a.onclick = function () {
        //alert(b.value);
        //alert(b.getAttribute(‘da‘));
        if (b.value == b.getAttribute(da)) {
            alert(正确);
        } else {
            alert(错误);
        }
    }
</script>

(二)定时器

1.window.setTimeout(function(){},间隔时间毫秒);

  定时触发,延迟执行,只能执行一次

2.window.setInterval(function(){},间隔时间毫秒);

  无限循环,每次都有间隔时间,一般大于20毫秒,有返回值,可以用变量来接受这个定时器的对象

3.window.clearInterval(要关闭的定时器对象);

  执行停止定时器的执行

  例子:用定时器制作简单的动画

  一个按钮,一点击,按钮会往屏幕右边移动,离屏幕左边500px的时候停止

  

<!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>
        #but1 {
            position:absolute;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <input type="button" id="but1" value="请点击开始"/>
</body>
</html>
<script type="text/javascript">
    var a = document.getElementById(but1);
    a.onclick = function () {
        var aa = window.setInterval(function () {
            if (a.offsetLeft > 500) {//如果当前元素距离左边的距离超过500px;就会执行停止条件
                window.clearInterval(aa);
            }
            a.style.left = a.offsetLeft + 10 + px;//每循环一次,a标签距离左边的距离等于它本身距离左边的距离加上10
        }, 20);
        
    }
</script>

(三)操作元素

1对象.innerHTML = ‘值‘;  

  赋值:标记会被编译执行 

  取值:标记会取出     var s = 普通元素.innerHTML; 

2对象.innerText = ‘值‘;

  赋值:内容直接全部输入

  取值:只取文字内容   var s = 普通元素.innerText; 

3.注意:表单元素 ---  只能用value来取值赋值

  表单元素.value = ‘值‘;

  var a = 表单元素.value;

(四)操作相关元素

1.找到同辈的相关元素

  a.nextSibling --- 找到a的下一个(位置)同辈元素

  a.previousSibling --- 找到a的上一个(位置)同辈元素

  注意:如果有回车空格也算,需要继续加(nextSibling或者previousSibling)

2.父辈元素

  a.parentNode --- 找到a的上一级(包含a的元素)父辈元素 

3.子元素

  a.childNodes --- 找出的是数组,

  a.firstChild  --- 找出的是第一个子元素

  a.lastChild --- 找出的是最后一个子元素

  a.childNodes[n] --- 找第几个,

    alert(nodes[i] instanceof Text);判断是不是文本,是返回true,不是返回flase,用if判断,如果是flase,可以去除空格 

(五)元素的创建、添加、删除

1. var a = document.createElement(‘标记名‘); - 动态创建元素,并赋值给a;

  a.appendChild(a); --- 像a标签中添加一个子元素

  a.removechild(对象); --- 删除一个子元素 

2017-3-31 操作属性 定时器 操作内容 操作相关元素 元素创建添加删除

标签:utf-8   window   element   type   tno   tin   ext1   code   定时   

原文地址:http://www.cnblogs.com/qingnianxu/p/6653502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!