setAttribute的具体用法

setAttribute的具体用法setAttribute(stringname,stringvalue):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。1、样式问题setAttribute("cl

大家好,又见面了,我是你们的朋友全栈君。

setAttribute(string name, string 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 type=”text” name=”q” 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!”); }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154597.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • servlet的工作原理_除氧器的工作原理

    servlet的工作原理_除氧器的工作原理目录 —写在前面—Servlet的使用与侧重点—Servlet的工作原理 a—Servlet容器怎样工作(以Tomcat为例) b—Web应用在servlet容器中如何启动 c—Servlet容器怎样解析web.xml中定义的servlet d—Servlet容器怎样管理servlet生命周期 e—用户的请求是怎样分配到指定servlet进行处理的写在前面: 现在

    2022年10月5日
    4
  • furture_南京future

    furture_南京future我想,还是不知道未来比较好!揭开神秘的同时也扼杀了希望,所谓预测未来就是创造那个未来,意味着我们放弃了主宰未来的权利!

    2022年8月3日
    6
  • [Elasticsearch] 邻近匹配 (三) – 性能,关联单词查询以及Shingles

    [Elasticsearch] 邻近匹配 (三) – 性能,关联单词查询以及Shingles提高性能短语和邻近度查询比简单的match查询在性能上更昂贵。match查询只是查看词条是否存在于倒排索引(InvertedIndex)中,而match_phrase查询则需要计算和比较多个可能重复词条(Multiplepossiblyrepeated)的位置。在LuceneNightlyBenchmarks中,显示了一个简单的term查询比一个短语查询快大概10倍,比一

    2025年6月12日
    6
  • 5分钟,6行代码教你写爬虫!(python)[通俗易懂]

    5分钟,6行代码教你写爬虫!(python)[通俗易懂]5分钟,6行代码教你写会爬虫!适用人士:对数据量需求不大,简单的从网站上爬些数据。好,不浪费时间了,开始!先来个例子:输入以下代码(共6行)importrequestsfromlxmlimporthtmlurl=’https://movie.douban.com/’#需要爬数据的网址page=requests.Session().get(url)tree=html.f

    2022年6月7日
    50
  • jquery checkbox 设置选中和不选中

    jquery checkbox 设置选中和不选中1.设置选中:$(“#hasApply”).prop(“checked”,true);设置不选中:$(“#hasApply”).prop(“checked”,false);或如下方法://$(“#ck”).attr(“checked”,true)//选中//$(“#ck”).attr(“checked”,false)//未选中2.获取选中的状态:varstatus…

    2022年6月24日
    715
  • 有趣的一行 Python 代码

    有趣的一行 Python 代码

    2021年10月21日
    51

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号