javascript setAttribute, getAttribute 不兼容问题

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量113 收藏
点赞数
文章标签： javascript xhtml ui ViewUI
原文链接：http://www.cnblogs.com/seeley/p/3416257.html
版权

javascript setAttribute, getAttribute 不兼容问题


 
 
 
 

测试环境（客户端浏览器 ）
ie6，ie7， ie8兼容模式， ie8
firefox 3.6.8, google chrome 5.0.375.125

先来说明两个函数的标准定义。
elementnode.setattribute(name,value)
name 必需。规定要设置的属性名。
value 必需。规定要设置的属性值。
该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

elementnode.getattribute(name)
name 必需。规定从中取得属性值的属性。

一、setattribute的问题
elementnode为<tr>...</tr>

希望对其增加一个单击行的事件处理函数，
写法1：
table1row1.setattribute("onclick", "selectrow1(this)");
ie8, firefox, google chrome 能正确触发click 事件
ie6，ie7则不能触发click 事件。
写法2：
table2row1.onclick = function() { selectrow2(this) };
所有测试浏览器均能触发click 事件

故为了兼容在不同的ie中，我们可以统一使用如下语句。
table2row1.onclick = function() { selectrow2(this) };


二、getattribute的问题
elementnode为 <tr>...</tr>
先用setattribute设置属性
table1row1.setattribute("level", 1);
再用getattribute来获取标签的属性值
var level = table1row1.getattribute("level");
alert("table1row1 level:" + level + " typeof(level) = " + (typeof (level)).tostring());
在ie6，7 中显示

table1row1 level:1
typeof(level) = number

在ie8, firefox, google chrome中显示

 

table1row1 level:1
typeof(level) = string
为统一处理此两种情况，代码统一如下：
复制代码 代码如下:

var level = table1row1.getattribute("level");
if (level === undefined || level == null) {
level = "0";
}


level = level.tostring();
if (level.trim() == "") {
level = "0";
} 

 

 

或者使用ajax方法
$addhandler 是sys.ui.domevent.addhandler 的快捷方式，它的语法为：
$addhandler(element, eventname, handler);
element 公开事件的 dom 元素。
eventname 事件的名称。
handler 要添加的事件处理程序。
前面的语句可以写成这样：
$addhandler(row,"click", function() { selectrow(this) });
下面为测试的html代码
复制代码 代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/ 网页特效" language=" 网页特效">
function pageload() {
var table1row1 = document.getelementbyid("table1row1");
table1row1.setattribute("level", 1);
table1row1.setattribute("onclick", "selectrow1(this)");
var table1row2 = document.getelementbyid("table1row2");
table1row2.setattribute("level", 2);
table1row2.setattribute("onclick", "selectrow1(this)");
var table2row1 = document.getelementbyid("table2row1");
table2row1.setattribute("level", 3);
table2row1.onclick = function() { selectrow2(this) };
var table2row2 = document.getelementbyid("table2row2");
table2row2.setattribute("level", 4);
table2row2.onclick = function() { selectrow2(this) };
}
var currentselectrow1 = null;
function selectrow1(newselectrow) {
if (currentselectrow1 != null) {
currentselectrow1.style.backgroundcolor = '#ffffff';
}
newselectrow.style.backgroundcolor = 'peachpuff';
currentselectrow1 = newselectrow;
}
var currentselectrow2 = null;
function selectrow2(newselectrow) {
if (currentselectrow2 != null) {
currentselectrow2.style.backgroundcolor = '#ffffff';
}
newselectrow.style.backgroundcolor = '#ff0000';
currentselectrow2 = newselectrow;
}
function button1_click() {
var table1row1 = document.getelementbyid("table1row1");
var level = table1row1.getattribute("level");
var desc1 = "table1row1 level:" + level + " typeof(level) = " + (typeof (level)).tostring();
alert(desc1);
var onclick1 = table1row1.getattribute("onclick");
var desc2 = "table1row1 onclick:" + onclick1.tostring() + " typeof(onclick) = " + (typeof (onclick1)).tostring();
alert(desc2);
}
function button2_click() {
var table2row1 = document.getelementbyid("table2row1");
var level = table2row1.getattribute("level");
var desc1 = "table2row1 level:" + level + " typeof(level) = " + (typeof (level)).tostring();
alert(desc1);
var onclick1 = table2row1.onclick;
var desc2 = "table2row1 onclick:" + onclick1.tostring() + " typeof(onclick) = " + (typeof (onclick1)).tostring();
alert(desc2);
}
</script>
</head>
<body οnlοad="pageload();">
<div style="width: 600px">
<span>table1</span>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-width: 1px;
border-style: solid; width: 100%; border-colla ps教程 教程e: collapse;">
<tr id="table1row0">
<td align="center" style="width: 50%;">
no.
</td>
<td align="center" style="width: 50%;">
item
</td>
</tr>
<tr id="table1row1">
<td align="center" style="width: 50%;">
1
</td>
<td align="left" style="width: 50%;">
2c.40e80.041
</td>
</tr>
<tr id="table1row2">
<td align="center" style="width: 50%;">
2
</td>
<td align="left" style="width: 50%;">
4l.013y2.003
</td>
</tr>
</table>
<input type="button" id="button1" οnclick="return button1_click();" />
</div>
<div style="width: 600px">
<br />
<span>table2</span>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-width: 1px;
border-style: solid; width: 100%; border-collapse: collapse;">
<tr id="table2row0">
<td align="center" style="width: 50%;">
no.
</td>
<td align="center" style="width: 50%;">
item
</td>
</tr>
<tr id="table2row1">
<td align="center" style="width: 50%;">
1
</td>
<td align="left" style="width: 50%;">
4g.0qe18.001
</td>
</tr>
<tr id="table2row2">
<td align="center" style="width: 50%;">
2
</td>
<td align="left" style="width: 50%;">
2k.61209.208
</td>
</tr>
</table>
<input type="button" id="button2" οnclick="return button2_click();" />
</div>
</body>
</html>
 

转载于:https://www.cnblogs.com/seeley/p/3416257.html

weixin_30414245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript中setAttribute兼容性用法分析
10-20
JavaScript中的`setAttribute`方法是用来给HTML元素添加或修改属性的，但不同的浏览器可能存在兼容性问题。以下是关于`setAttribute`在JavaScript中的使用及其兼容性的一些详细分析： 1. **常规属性与自定义属性**...
js setAttribute 不生效 解决方案
qq_32100465的博客
09-02 3155
1、setAttribute("disabled", "false") 改为 removeAttribute("disabled"); 2、setAttribute("checked", "true"); 改为 .checked = true
IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值
weixin_33973600的博客
09-01 121
IE6/7中不能通过setAttribute设置元素的style属性，也不能通过getAttribute获取元素的style属性值。它获取的是一个style对象。   如下 &lt;div style="color:blue"&gt;div test&lt;/div&gt; &lt;script type="text/javascript"&gt; var div1 = docu...
浅谈getAttribute兼容性
weixin_34221036的博客
06-03 512
最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用。于是百度了一些解决办法。 IE的setAttribute中与标准浏览器的有许多不同，主要表现在IE对setAttribute的功能上有些限制，就是不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性，那这样就会导致setAttrib...
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
01-19
测试环境（客户端浏览器 ） IE6，IE7， IE8兼容模式， IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义。 elementNode.setAttribute(name,... 一、setAttribute的问题 elementNode为<tr>
javascript中setAttribute()函数使用方法及兼容性
12-10
然而，需要注意的是，`setAttribute()`的兼容性问题。虽然在大部分现代浏览器中，这个函数都能正常工作，但旧版的Internet Explorer（如IE6和IE7）在处理某些特定属性时可能存在问题。例如，`class`属性在这些旧版本...
javascript兼容性解决方法大全
07-01
通用的方法是使用`getAttribute`和`setAttribute`方法，如`div1.getAttribute("value")`和`div1.setAttribute("value", val)`。 综上所述，解决JavaScript的浏览器兼容性问题通常需要对各个浏览器的特性有深入理解...
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 383
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 411
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 409
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 301
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Vue3】图片未加载成功前占位
菜就多练
08-08 323
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 432
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1434
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 297
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 434
Json的序列化与反序列化
Vue3中的history模式路由：打造无缝导航体验！
Jacklx888的博客
08-10 256
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
setattribute和getattribute
06-28
回答3：</h3><br/>setAttribute和getAttribute是JavaScript中DOM（Document Object Model）的元素属性操作方法。setAttribute方法用于设置指定元素的属性值，而getAttribute方法用于获取指定元素的属性值。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值