• javascript setAttribute使用方法 查缺补漏


    SetAttribute
    -----------------
    
    示例:当一个按钮被点击后他的Value值发生改变(提示用户目前的状态),并且这个按钮变为不可用(防止用户再次点击造成重复提交)
    
    --------------------------
    <script>
    function cs() { 
    document.getElementById("cs").setAttribute("value","请稍后,正在上传...");
    document.getElementById("cs").setAttribute("disabled","disabled");
    }
    </script>
    <div align="center">
    <input name="cs" type="submit" id="cs" value="上传图片" onclick="javascript:cs()";></div>
    
    ------------------------------
    
    语法:
    
    setAttribute(attribute,value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
    
    问题:
    
    1、样式问题
    
    setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号。
    vName代表对样式赋值。
    例如:
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", "q");
    input.setAttribute("class",bordercss);
    输出时: ,即,input控件具有bordercss样式属性
    注意:class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
    使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
    同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
    
    element.setAttribute("class", value); //for firefox
    element.setAttribute("className", value); //for IE
    
    2、方法属性等问题
    
    
    例如:
    var bar = document.getElementById("testbt");
    bar.setAttribute("onclick", "javascript:alert(This is a test!);");
    这里利用setAttribute指定e的onclick属性,简单,很好理解。
    
    但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
    
    为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
    document.getElementById("testbt").className = "bordercss";
    document.getElementById("testbt").style.cssText = "color: #00f;";
    document.getElementById("testbt").style.color = "#00f";
    document.getElementById("testbt").onclick= function () { alert("This is a test!"); }
    
    
    由此延伸的问题
    
    一个input的text,当将html赋值为某个div的innerHTML时,遇到一个现象,当在firefox下时(IE下不存在此问题),赋值后的innerHTML里不含有value,即当你在文本框输入内容后,你想将<input type=text name=input1 value=”aa”>赋值给div时,只会得到<input type=text name=input1>,这里总是会将value清除.
    
    这时,setAttribute起作用了,在input内加上:onkeyup="this.setAttribute(value,this.value)",即动态的将input控件加上value值,这时再将文本框赋值给div,value将不会被清空.
    

    本人声明: 个人主页:沐海(http://www.cnblogs.com/mahaisong) 以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ!欢迎交流!
  • 相关阅读:
    struts 简单配置运用做一个简单的注册
    hibernate 锁 (转)
    Hibernate 缓存机制(转)
    解决Hibernate:could not initialize proxy
    el 表达式用法(转)
    自动生成Hibernate框架结构
    封装hibernate 初始化类 方便调用 (静态单例模式)
    构建hibernate 框架实现增删改查功能
    JSON 与 对象 、集合 之间的转换(转)
    Ajax 引擎 传输数据的方法
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2190769.html
Copyright © 2020-2023  润新知