Javascript可以切换边框吗？答案

【问题标题】：Can Javascript toggle frameborders?Javascript可以切换边框吗？
【发布时间】：2010-10-29 03:23:56
【问题描述】：

我正在尝试使用 JS 来切换框架的 frameborder 属性。这是我的测试用例：

<html>
  <head>
  <script type="text/javascript">
    function off() {
      var f1 = document.getElementById("f1");
      var f2 = document.getElementById("f2");
      alert ("before, frame f1 had frameBorder=" + f1.frameBorder);
      f1.frameBorder = "0";
      alert ("after, frame f1 has frameBorder=" + f1.frameBorder);
      alert ("before, frame f2 had frameBorder=" + f2.frameBorder);
      f2.frameBorder = "0";
      alert ("after, frame f2 has frameBorder=" + f2.frameBorder);
    }
  </script>
  </head>

  <frameset cols="50%, 50%" name="fs">
    <frame frameborder="1" src="http://bikeshed.com" id="f1" name="f1" />
    <frame frameborder="1" src="http://bikeshed.com" id="f2" name="f2" />
  </frameset>
</html>

我在 Firefox 中加载它，打开 Firebug，然后在控制台中输入“off()”。它运行我的函数，报告两个 frameborders 已设置为“1”，现在设置为“0”。但是，frameborder 没有消失。

我正在尝试做的事情可能吗？如果有，怎么做？

【问题讨论】：

虽然您可以更改 frameborder 属性，但 Safari 和 FF 都不会重新呈现页面，因此您不会注意到更改。

标签： javascript html css

【解决方案1】：

使用 iframe 代替框架似乎可行。您必须在 CSS 上做一些工作才能完成框架集的错觉。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <title>Frame Test</title>
  <script language="javascript">
    var off = function () {
      document.getElementById('frame1').style.borderWidth = 0;
      alert('off');
    }
  </script>


</head>
<body style="margin: 0; padding: 0">
<table style="width: 100%; height: 100%" cols="2">
<tr>
<td><iframe id="frame1" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
<td><iframe id="frame2" src="http://www.google.com" style="margin: 0; width: 100%;  height: 100%"></iframe></td>
</tr>
</table>

</body>
</html>

【讨论】：

这在 IE8 中不起作用。 Internet Explorer 将 frameborder 视为 CSS 边框的单独边框！（我目前遇到的问题是我无法使用脚本清除 IE8 中的边框 - 我怀疑 IE8 根本没有更新页面（如顶部评论中所暗示的那样），因为该属性似乎已设置好？！）

【解决方案2】：

对于某些属性，您需要使用setAttribute。试试

f1.setAttribute('frameborder', 0);

【讨论】：

我认为它应该是frameBorder，带有大写 B。但事实上，正如上面@Patrick 所建议的那样，当应用于 iframe 时，这些天都可以在 FF 3.6 上工作。
@w3d: "frameborder" 更正确，因为属性名称都是小写的。您可能会想到在访问 CSS 属性时使用驼峰式大小写，而不是 frameborder，以替代 CSS 属性名称中的破折号。在 Firefox 中，setAttribute converts the attribute name to lower case，这就是为什么两者都有效。其他一些浏览器似乎也这样做，尽管它不是标准行为，因此不应依赖。帕特里克没有使用 frameborder 属性，所以我不确定你的第二句话是什么意思。
感谢您对setAttribute 的澄清，是的，“frameborder”（全小写）似乎更正确，更有意义。然而，我的困惑是因为相应的 JavaScript 属性是frameBorder，所以如果使用对象点表示法来设置属性/属性，您必须使用iframeObj.frameBorder = 0 才能删除 frameborder 属性。 IE 之前（？）无法区分属性和属性以及 setAttribute('frameborder',0) 在 IE8 中不起作用的事实进一步混淆了这一点。
@otis 在提到 Patrick 的帖子时，我实际上只是指他对 iframe 的使用。而且我最近一直在处理 iframe，而不是框架本身。