Javascript 如何在缩放中显示gridview行

在asp.net vs05上工作。我想在gridview上设置鼠标事件

然后根据事件类型，如果事件为mouseover，则缩放行；如果事件为mouseout，则将行缩放回事件发生前的原始行

如果（e.Row.RowType==DataControlRowType.DataRow）

{
e、 Add（“onmouseover”、“MouseEvents（this，event）”）；
e、 Add（“onmouseout”、“MouseEvents（this，event）”）；
} 
功能鼠标事件（objRef、evt）
{
if（evt.type==“鼠标悬停”）
{
objRef.style.height=“100%”；
objRef.style.width=“100%”；
}

---

无论我想要什么，上面的代码都不会以这种方式运行。我想要放大和缩小？

虽然从长远来看，最好使用JavaScript库来处理这个问题，但我将解释如何实现您想要的缩放效果以保持简单

你的标记和.NET代码是正确的。你需要调整你的JavaScript并添加一些CSS来完成你想要的

在最基本的层面上，您要做的是：

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.style.fontSize= "120%"; 
    } else {
        objRef.style.fontSize= "100%"; 
    }
}

像在问题中那样更改高度和宽度只会更改单元格的尺寸，而不会更改内容。实现缩放效果的最简单方法是增加字体大小

一旦你这样做了，你需要考虑你的表的流会如何影响字体BigGE。随着字体越来越大，每个单元格的高度和宽度都会增加。这会使布局跳跃，变得烦人。

• 若要解决高度偏移问题，请更改表格单元格中的

  行高度

  。这将确保当您将鼠标悬停在行上方时，行不会上移或下移
• 要处理宽度偏移，单元格的

  宽度

  （或者更好，表格本身）应设置为足够大，以便表格本身不会因为行需要更多空间来容纳较大的文本而增长

以下是您解决这些问题的方法：

tr {line-height: 25px}
/* change the "200px" to be whatever your table needs */
table { 200px }

为了更进一步，我们可以改进JavaScript，使其更加灵活

在JavaScript中包含表示详细信息是一种不好的做法。请思考如果将来需要更改悬停行的外观会发生什么。如果发生这种情况，则必须修改代码逻辑，随着应用程序的增长，处理代码逻辑可能会很烦人。表示规则应该放在一个地方，一个中心样式表

最好让JavaScript替换掉CSS类。然后您可以将“悬停”样式规则放入CSS文件中。为此，您可以将JavaScript更改为以下内容：

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.className = "hover";
    } else {
        objRef.className = "";
    }
}

.hover{font-size: 120%}

完成此操作后，现在可以将“缩放”样式移动到CSS中，如下所示：

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.className = "hover";
    } else {
        objRef.className = "";
    }
}

.hover{font-size: 120%}

JavaScript只是添加或删除这个CSS类。没有这个类的任何东西都会有默认的100%字体大小，然后当添加这个类时，它会变得更大。保持CSS中的东西还允许你添加其他东西，如更改行的背景色、字体重量、文本颜色等。所以这样做是个好主意像这样

可以在此处找到此答案中代码的实时演示：

---

正如我在文章开头提到的那样，最好使用诸如、或之类的JavaScript框架。这将允许您将JavaScript代码与标记（以及ASP.NET代码逻辑）完全分离它还允许您避免JavaScript事件中跨浏览器怪癖的危险，我假设这就是为什么您首先使用HTML属性触发JavaScript事件的原因，因为这比完全在没有框架的JavaScript中从头开始要容易得多