专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > 图形/图像

js学习之Frame、Frameset 以及 IFrame 对象跟image对象

发布时间:2011-06-27 19:40:16 文章来源:www.iduyao.cn 采编人员:星星草
js学习之Frame、Frameset 以及 IFrame 对象和image对象
今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习了,好多东西都是一知半解,做项目的时候百度,过后就忘记了,难得轻松,好好地系统学习下.对于前段的知识都是参考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>


友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: