效果:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
var oSelsctAll = document.getElementById("selectAll");
var oFx = document.getElementById("fx");
var aInput = document.getElementsByTagName("input");
oSelsctAll.onclick = function(){
for(var i = 0;i<aInput.length;i++){
if(aInput[i].checked == true){
aInput[i].checked = false;
}else{
aInput[i].checked = true;
}
}
}
oFx.onclick = function(){
for(var i = 0;i<aInput.length;i++){
aInput[i].checked = !aInput[i].checked;//“!”为非
}
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<button id="selectAll">全选</button><br />
<button id="fx">反选</button><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</body>
</html>
overflow:hidden 自动隐藏超出的字符,图片,防止撑出层和表格的范围。不过你真的理解了这个标签吗?
这两天帮客户做div+css重构,遇到了这样的问题。对方的标题是中英文混排,没法控制字符的数量
我也想到了overflow:hidden这个标签 不过只是没理解透 网上的文字也没细说 主要是这个范围 一般我们只考虑了横向的范围,就是定义width 但是没考虑纵向的范围,没定义height 于是不管怎么搞 就是不隐藏,自动换行,后来在调整上下间距的时候,突然想到没定义height 字符所以会跑到换行 赶紧定义height ok了 显示完美了.
也就是说在FF中不允许程序员“偷懒”,该写的一定要写。但是在IE就比较适合喜欢“偷懒”的程序员
ie w3c
window.event event
srcElement target 事件源
returnValue preventDefault 取消给定事件的默认行为
cancelBubble stopPropagation 停止事件冒泡
attachEvent addEventListener 绑定多个事件
detachEvent removeEventListener 移除多个事件
eg:
W3C addEventListener(事件,函数,布尔) removeEventListener(事件,函数,布尔)this作用域是当前元素
ie attachEvent(事件处理程序名称,函数) detachEvent(); this作用域是window
btn.addEventListener("click",function(){alert(this.id)},false);
btn.addEventListener("click",function(){alert("hello")},false);
btn.removeEventListener()//不能移除匿名函数
//跨浏览器方法:
//获取事件对象
function getEvent(event){
return event?event:window.event;
}
//获得事件源
function getTarget(event){
return event.target||event.srcElement;
}
//取消默认行为
function preventDefault(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
//阻止事件冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
//获取相关元素
function getRelatedTaarget(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){//ie mouseout的相关元素
return event.toElement
}else if(event.fromElement){//ie mouseover的相关元素
return event.fromElement
}else{
return null;
}
}
本文链接