点击frameset边框自动隐藏或显示窗口简单例子
时间: 2023-07-16 14:14:15 浏览: 60
以下是一个简单的例子,可以让您点击一个按钮来隐藏或显示一个具有框架集边框的窗口。您可以将此代码复制并粘贴到您的 HTML 文件中。
```html
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
<script>
function toggleFrame() {
var frame = parent.document.getElementsByTagName("frameset")[0];
if (frame.cols == "0,*") {
frame.cols = "200,*";
} else {
frame.cols = "0,*";
}
}
</script>
</head>
<body>
<button onclick="toggleFrame()">Toggle Frame</button>
</body>
</html>
```
在这个例子中,我们定义了一个名为 `toggleFrame()` 的 JavaScript 函数,该函数将在单击按钮时被调用。函数将找到父文档中的第一个框架集元素,并检查其 `cols` 属性,以确定窗口当前是否处于隐藏状态。如果窗口当前被隐藏,则函数会将 `cols` 属性设置为 `"200,*"`,这将使左侧窗格的宽度为 200 像素,并将右侧窗格占据其余空间。如果窗口当前已经显示,则函数会将 `cols` 属性设置为 `"0,*"`,这将使左侧窗格的宽度为 0 像素,并将右侧窗格占据整个空间。
请注意,此代码假定您的 HTML 文档在一个框架集中运行,并且其中的一个框架具有边框。如果您的文档不是框架集,或者您的框架没有边框,那么这个例子将不起作用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![ppt](https://img-home.csdnimg.cn/images/20210720083527.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)