工作中遇到的JS小记

来源：互联网发布：如何玩好刘邦知乎编辑：程序博客网时间：2024/06/05 01:05

JavaScript可以出现在HTML的任意地方。使用<script></script>，可以在HTML文档的任意地方插入JavaScript，甚至可以再<HTML>之前插入也不成问题。不过如果要在声明框架的网页中插入，就一定要在<frameset>之前插入，否则不会运行。

如果想在浏览器的“地址”栏中执行JavaScript语句，用这样的格式：

javascript:<JavaScript语句>

这样的格式也可以用在连接中：

1、window.event:表示当前触发的事件对象；

window.event.srcElement:表示触发事件的DOM元素；

window.event.srcElement.id:表示触发事件的DOM元素的id；

例如：你点击了按钮“搜索”，那么这个srcElement就是这个按钮“搜索”，id就是这个按钮的id。

2、window.event.returnValue=false;

解析：取消事件的默认行为。即如果放到onclick事件中则不会提交表单，如果放到超链接中则不执行超链接。

      3、window.screen.availWidth 返回当前屏幕宽度(空白空间) ，即窗口最大化后宽度。
           window.screen.availHeight 返回当前屏幕高度(空白空间) ，即窗口最大化后高度。
           window.screen.width 返回当前屏幕宽度(分辨率值)
           window.screen.height 返回当前屏幕高度(分辨率值)
           window.document.body.offsetHeight; 返回当前网页高度
           window.document.body.offsetWidth; 返回当前网页宽度

待续中...

常用的CSS代码含义：

1、font:12px Tahoma;

解析：这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma;说明字体是12像素大小，字体为Tahoma格式。

2、margin:0px;

解析：这里使用了缩写，完整代码应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或者margin:0px 0px 0px 0px。顺序是：上右下左。

margin:0px auto;

解析：说明上下边距为0px，左右为自动调整；

padding属性和margin属性有很多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding是内部距离。

padding用来设置元素内容到元素边界（border）的距离。
margin用来设置页面中一个元素所占空间的边缘（border）到相邻元素之间的距离.

3、text-align:center;

解析：文字对齐方式，可以设置为左、右、中。

4、background:#ccc url('bg.gif') top left no-repeat;

意思：使用#ccc（灰度色）填充整个层，使用bg.fig做为北京图片；top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。

top/right/left/bottom/center用于定位背景图片。

还可以使用：background:url('bg.gif') 20px 100px;表示x坐标为20px，Y坐标为100px的精确定位；

repeat/no-repeat/repeat-x/repeat-y分别表示填充满整个层/不填充/沿x轴填充/沿Y轴填充。

background可以用来给指定的层填充背景色、背景图片。

background:#FFF：设置背景色为白色，这里颜色使用了缩写，完整应该是background:#FFFFFF

5、margin:0 auto;

解析：这条语句使得页面居中显示。表示上下边距为0，左右为自动，因此该层就会自动居中了。

如果要让页面居左，则取消掉auto值就可以，因为默认是居左显示。

6、

#menu ul{list-style:none;margin:0px;}

#menu ul li{float:left;margin:0 10px;}

解析：list-style:none:这一句是取消列表前的点；

margin:0px：这一句是删除ul的缩进，使所有的列表内容都不缩进；

float:left：让内容都在同一行显示，因此使用了浮动属性（float）。

margin:0 10px：作用是让列表内容之间产生了一个20px的距离（左：10px，右:10px）。

在每个列表内容之间加入竖线，就是在<li class="menuDiv"></li>添加以下CSS：

.menuDiv{width:1px;height:28px;background:#999}

这样菜单选项的文字却在顶部，应修改一下代码：

#menu ul li{float:left;margin:0 10px;display:block;line-height:28px;}

解析：display:block;此元素将显示为块级元素，此元素前后会带有换行符。

line-height:28px;行间距

修改菜单的超链接样式：

#menu ul li a:link,#menu ul li a:visited{font-weight:bold;color:#666}

7、如果要在表格中绘制一条虚线，需要制作一个很小的图片来填充，还有更简单的方法，只要在<td></td>中加入这么一段就可以了：

dashed:虚线

solid：实线

dotted：点线

8、一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决问题，使内容太长的部分自动被隐藏。