为什么以下代码在IE8中正常工作，而不能在Chrome和mozila中工作？ [英] Why below code correctly work in IE8 , and not work in Chrome and mozila ?
本文介绍了为什么以下代码在IE8中正常工作，而不能在Chrome和mozila中工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="javascripttest.aspx.vb" Inherits="javascripttest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function AddDept_ClientClick() {
document.getElementById("lnkAddDept").style.color = "#0064a5";
document.getElementById("lnkAddUser").removeAttribute("style");
document.getElementById("lnkImpADUser").removeAttribute("style");
document.getElementById("lnkImpUserList").removeAttribute("style");
return false;
}
function AddUser_ClientClick(obj) {
document.getElementById("lnkAddDept").removeAttribute("style");
document.getElementById("lnkAddUser").style.color = "#0064a5";
document.getElementById("lnkImpADUser").removeAttribute("style");
document.getElementById("lnkImpUserList").removeAttribute("style");
return false;
}
function ImportADUser_ClientClick() {
document.getElementById("lnkAddDept").style.color = "black";
document.getElementById("lnkAddUser").style.color = "black";
document.getElementById("lnkImpADUser").style.color = "#0064a5";
document.getElementById("lnkImpUserList").style.color = "black";
return false;
}
function ImportUser_ClientClick() {
document.getElementById("lnkAddDept").style.color = "black";
document.getElementById("lnkAddUser").style.color = "black";
document.getElementById("lnkImpADUser").style.color = "black";
document.getElementById("lnkImpUserList").style.color = "#0064a5";
return false;
}
</script>
<style type="text/css">
.change
{
text-decoration:none;
}
.change:hover
{
color: #0064a5;
text-decoration:underline;
cursor :pointer ;
}
.fontbold12 {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 84%; padding-removed 8px" class="fontbold12"> <a runat="server" class="change" önmousedown="return AddDept_ClientClick()" id="lnkAddDept">Add Department</a>
</td>
</tr>
<tr id="tradduser" runat="server">
<td style="width: 84%; padding-removed 8px" class="fontbold12"> <a runat="server" class="change" önclick="return AddUser_ClientClick()" id="lnkAddUser" visible="True">Add User</a>
</td>
</tr>
<tr id="trimportaduser" runat="server">
<td style="width: 84%; padding-removed 8px" class="fontbold12"> <a runat="server" class="change" önclick="return ImportADUser_ClientClick()" id="lnkImpADUser">Import AD User</a>
</td>
</tr>
<tr>
<td style="width: 84%; padding-removed 8px" class="fontbold12"> <a runat="server" class="change" önclick="return ImportUser_ClientClick()" id="lnkImpUserList">Import User List</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
以上html页面
the above in html page
Partial Class javascripttest
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
lnkAddUser.Disabled = True
lnkAddDept.Disabled = True
lnkImpADUser.Disabled = False
lnkImpUserList.Disabled = False
End Sub
End Class
在此以上我将禁用前2个超链接从服务器端启用下一个2超链接。
如果我运行IE 8，它工作正常，但如果我在chrome和Mozilla中运行它不能正常工作。
其实我需要的是第2个超级用户无法点击，而且页面没有得到更改，在IE 8用户无法点击，而且页面也没有得到更改，这是我的需要。
但是在Chrome和Mozilla中可以先点击2超链接以及页面获得更改。
为什么在IE 8中正确响应并且chrome和Mozilla没有响应？
in this above i will disable first 2 hyper link and next 2 hyper link enable from server side.
if i run IE 8 ,it work correctly,but if i run in chrome and Mozilla it not work correct.
Actually my need is first 2 hyper user cant click and also page not get changes, in IE 8 user cant click and also page not get changes and this is my need.
but in chrome and Mozilla can click first 2 hyper link and also page get changes.
why in IE 8 correctly respond and chrome and Mozilla not respond ?
推荐答案
乍一看，我看不到任何不兼容的代码片段，但它们并不那么容易被发现。不过，我可以建议如何解决这个问题。
你的代码设计中有一些明显的问题。我的意思是：这种代码风格是不可接受的，可能会导致许多不同的问题。你需要重构代码，如果问题不会发生（但很可能会发生），你将解决进一步的问题。怎么做？
让我们从HTML和静态样式开始吧。首先，一劳永逸地摆脱所有样式属性，永远不会回到这个坏主意。仅使用类属性，并且仅当您不打算在JavaScript中修改样式时，或者您只想在JavaScript中添加和删除其他类到元素时，这些附加类应在永久类之上添加微小更改。请看下面的内容。此外，您过度使用类。为什么要在每个< td>元素上写一个课程？这是错的。在大多数情况下确定哪些元素应具有相同的样式。然后，将此样式放在CSS代码中，用于对象td，而不是td.fontbold12（并且永远不要使用fontbold12这样的名称;样式应按其用途命名，而不是查看;例如：td。选择）。此外，不要使用其他样式属性，如width，cellpadding，cellspacing;把它全部转移到CSS中。认真。 甚至不想放弃它的想法。
现在，关于使用JavaScript动态更改样式。不要添加或删除样式属性，并且（几乎）不要添加或删除其他属性。而是添加和删除CSS类。此外，您应该更好地动态添加所有事件处理程序。它将有助于更好地从脚本中隔离HTML。所以，我们正在编写你的脚本。如何做到这一点？
一个非常好的方法就是使用jQuery。记住，jQuery在设计时考虑了兼容性。在实践中，你必须很少检查功能的兼容性，因为jQuery会照顾它。
这是你添加/切换样式的方法：
http://api.jquery.com/addClass/ [ ^ ]，
http://api.jquery.com/removeClass/ [ ^ ]，
http://api.jquery.com/toggleClass/ [ ^ ];
见还：
http://api.jquery.com/css/ [ ^ ]，
http://api.jquery.com/category/css/ [ ^ ]。
jQuery中的事件以非常优雅的方式处理，采用一种就地形式，当文档准备就绪时，所有事件都在一个事件中设置。如果您学习jQuery的基础知识（强烈推荐），您将立即看到如何做到这一点：
http：/ /en.wikipedia.org/wiki/JQuery [ ^ ]，
http://jquery.com [ ^ ]，
http：// learn.jquery.com [ ^ ]，
http://learn.jquery.com/using-jquery-core [ ^ ]，
http://learn.jquery.com/about-jquery/how-jquery-works [ ^ ]（从这里开始）。
Arain，记住jQuery的兼容性设计记住。
-SA
At first glance, I cannot see any incompatible fragments of code, but they are not so easy to spot. Nevertheless, I can advise how to solve the problem.
There are some apparent problems in your code design. I mean it: this code style is unacceptable and can cause many different problems. You need to refactor the code, and, if the problem won't go (but most likely it will go), you would address further problems. So what do to?
Let's start with HTML and static styles. First of all, get rid of allstyleattributes, once and forever, and never come back to this bad idea. Use only class attributes, and only when you are not going to modify the style in JavaScript, or when you only want to add and remove additional class to elements in JavaScript, and those additional classes should add minor changes on top of "permanent" class. See about that below. Also, you are overusing the classes. Why do you write a class at each<td>element? This is wrong. Figure out which elements should have the same style in most cases. And then, put this style in CSS code for object "td", not "td.fontbold12" (and never use such names as "fontbold12"; the styles should be named after they purpose, not look; for example: "td.selection"). Also, don't ever use other styling attributes like "width", "cellpadding", "cellspacing"; move it all into CSS. Seriously. Don't even play with the idea of leaving it as is.
Now, about changing styles dynamically using JavaScript. Don't add or remove style attributes, and (almost) never add or remove other attributes. Instead, add and remove CSS classes. Also, you should better add all event handlers dynamically. It will help to better isolate HTML from scripts. So, we are coming to your scripting. How to do it all?
One very good way to do so is using jQuery. Rememeber, jQuery is designed with compatibility in mind. In practice, you will have to check up compatibility of features only rarely, as jQuery takes care about that.
This is how you can add/toggle styles:
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^];
see also:
http://api.jquery.com/css/[^],
http://api.jquery.com/category/css/[^].
Events in jQuery are handled very elegantly, in a kind of in-place form, all set up in one single event when a document is ready. You will immediately see how to do it if you learn basics of jQuery (highly recommended):
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).
Arain, remember that jQuery is designed with compatibility in mind.
—SA
这篇关于为什么以下代码在IE8中正常工作，而不能在Chrome和mozila中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
