js学习之Frame、Frameset 以及 IFrame 对象和image对象
今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习了,好多东西都是一知半解,做项目的时候百度,过后就忘记了,难得轻松,好好地系统学习下.对于前段的知识都是参考W3school学习的,里面例子多
Frame、Frameset 以及 IFrame 对象
大小可调整和不可调整的框架 代码来自w3school
带滚动条和不带滚动条的框架 代码来自w3school
跳出框架 代码来自w3school
更改两个框架的员 代码来自w3school
image 对象
改变图像的大小 代码来自w3school
改变图像的src 代码来自w3school
Frame、Frameset 以及 IFrame 对象
大小可调整和不可调整的框架 代码来自w3school
<html> <frameset cols="50%,50%"> <frame id="leftFrame" src="/example/hdom/frame_noresize.html"> <frame id="rightFrame" src="/example/hdom/frame_a.html"> </frameset> </html>
带滚动条和不带滚动条的框架 代码来自w3school
<html> <frameset cols="50%,50%"> <frame id="leftFrame" src="/example/hdom/frame_scroll.html"> <frame id="rightFrame" src="/example/hdom/frame_a.html"> </frameset> </html>
跳出框架 代码来自w3school
<html>
<head>
<script type="text/javascript">
function breakout()
{
if (window.top!=window.self)
{
window.top.location="/example/hdom/tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<input type="button" onclick="breakout()" value="跳出框架！">
</body>
</html>
更改两个框架的员 代码来自w3school
<html>
<head>
<script type="text/javascript">
function changeSource()
{
document.getElementById("frame1").src="/example/hdom/frame_c.html"
document.getElementById("frame2").src="/example/hdom/frame_d.html"
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1"></iframe>
<iframe src="/example/hdom/frame_b.html" id="frame2"></iframe>
<br /><br />
<input type="button" onclick="changeSource()" value="改变两个框架的 source">
</body>
</html>
image 对象
改变图像的大小 代码来自w3school
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="270"
document.getElementById("compman").width="164"
}
</script>
</head>
<body>
<img id="compman" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSize()" value="改变图像的高度和宽度">
</body>
</html>
改变图像的src 代码来自w3school
<html>
<head>
<script type="text/javascript">
function changeSrc()
{
document.getElementById("myImage").src="/i/eg_smile.gif"
}
</script>
</head>
<body>
<img id="myImage" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSrc()" value="改变图像">
</body>
</html>