解决项目中两个小问题: DIV 高度控制, javascript tooltips

最新推荐文章于 2021-02-24 11:58:11 发布

bruni

最新推荐文章于 2021-02-24 11:58:11 发布

阅读量2.4k

点赞数

分类专栏： Web 文章标签： javascript div styles 文档 html insert

本文链接：https://blog.csdn.net/bruni/article/details/1540217

版权

Web 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

今天因为项目加班,需要解决两个问题

1. 动态改变DIV高度的问题,于是在Google上搜了一番,找到几个有用的链接并解决了我的需求.

- 有时候你为一个DIV定义了样式,比如width=50%,可是并不知道到底这个div的真正宽度是多少.那么你可以通过以下方式来获得:
x = document.getElementById('testDiv');
var xHeight = x.offsetWidth;
javascript一共有四个这样的属性,其余三个是offsetHeight,offsetLeft,offsetTop. 要注意的是这些属性是只读read-only的.

- 设置DIV高度,宽度:
x = document.getElementById('testDiv');
x.style.height = 100;

以上这两点正好帮助解决了我的需求.

以下是我参考的其中一个文档链接:
Get Styles
http://www.quirksmode.org/dom/getstyles.html

2. 通过javascript在页面上显示一些tool tips

- 这个相对来说就更容易了,以前曾经看到过一个网站
http://www.walterzorn.com/tooltip/tooltip_e.htm
按照上面的文档下载之后写了一个静态html测试,tips却怎么也显示不出来.
后来重新仔细阅读了文档中红色标注的文字
Insert the following lines into the <body> section or your html file, preferably immediately before the closing </body> tag, but in any case after the last tag containing a tooltip:
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
原来要把<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>放到页面最后再引入,或者至少在最后一个使用tooltips之后.
总算又解决一个问题.

下面还有一个链接,上面有不少其他tooltips实现的链接,可以参考选择:
http://www.blinklist.com/tag/tooltip/