52ky 发表于 2022-5-2 11:29:13

JAVASCRIPT 中的 SETATTRIBUTE 用法

我们经常需要在 JavaScript 中为 Element 动态添加各种??属性,这可以通过使用 setAttribute() 来实现,这涉及到浏览器的兼容性问题。

setAttribute(string name, string value):添加具有指定名称和值的新属性,或将现有属性设置为指定值。

1.风格问题
setAttribute(class, value) 中的类是指改变类属性,所以需要用引号引起来。
vName 表示分配给样式。
例如:
var input = document.createElement(input);
input.setAttribute(类型,文本);
input.setAttribute(name, q);
input.setAttribute(class,bordercss);
输出时:,即输入控件有bordercss样式属性
注意:class 属性在 W3C DOM 中起着重要的作用,但由于浏览器的差异,仍然存在。
使用 setAttribute(class, vName) 语句动态设置元素的类属性在 Firefox 中有效,但在 IE 中无效。因为使用IE内核的浏览器不能识别类,所以需要使用className来代替;
此外,Firefox 不知道类名。所以常用的方法是两者都做:

element.setAttribute(class, value); //对于火狐
element.setAttribute(className, value); //对于 IE

2.方法属性等问题
例如:
var bar = document.getElementById(testbt);
bar.setAttribute(onclick, javascript:alert('这是一个测试!'););
这里用setAttribute来指定e的onclick属性,简单易懂。
但是 IE 不支持它。 IE不支持setAttribute函数,但不支持用setAttribute设置某些属性,如对象属性、集合属性、事件属性。也就是说用setAttribute设置样式和onclick属性是在IE中。不可能的。

为了实现与各种浏览器的兼容,可以使用点符号来设置 Element 的对象属性、集合属性和事件属性。
document.getElementById(testbt).className = bordercss;
document.getElementById(testbt).style.cssText = 颜色:#00f;;
document.getElementById(testbt).style.color = #00f;
document.getElementById(testbt).οonclick= function () { alert(这是一个测试!); }

由此延伸的问题:

一个输入文本,当html被赋值为一个div的innerHTML时,遇到一个现象,在firefox下(IE下不存在这个问题),赋值后的innerHTML不包含值,即当你在文本后输入框的内容,当你要赋值给div时,只会得到它,而这里的值会一直清零。

这时候setAttribute起作用了,在input中添加:οnkeyup=this.setAttribute('value', this.value),即动态添加value值到input控件中,然后将文本框赋值给div,值不会被清除。

(error)



页: [1]
查看完整版本: JAVASCRIPT 中的 SETATTRIBUTE 用法