当前位置:  编程技术>WEB前端
本页文章导读:
    ▪全选和反选      效果: 代码如下: <!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> <.........
    ▪CSS overflow:hidden的理解      overflow:hidden    自动隐藏超出的字符,图片,防止撑出层和表格的范围。不过你真的理解了这个标签吗? 这两天帮客户做div+css重构,遇到了这样的问题。对方的标题是中英文.........
    ▪事件兼容方法      ie                      w3cwindow.event     event srcElement         target    &nb.........

[1]全选和反选
    来源: 互联网  发布时间: 2013-11-06

效果:


代码如下:

<!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>


作者:wangxiaohui6687 发表于2013-2-28 15:51:56 原文链接
阅读:54 评论:0 查看评论

    
[2]CSS overflow:hidden的理解
    来源: 互联网  发布时间: 2013-11-06

overflow:hidden    自动隐藏超出的字符,图片,防止撑出层和表格的范围。不过你真的理解了这个标签吗?

这两天帮客户做div+css重构,遇到了这样的问题。对方的标题是中英文混排,没法控制字符的数量

我也想到了overflow:hidden这个标签   不过只是没理解透  网上的文字也没细说  主要是这个范围  一般我们只考虑了横向的范围,就是定义width 但是没考虑纵向的范围,没定义height 于是不管怎么搞  就是不隐藏,自动换行,后来在调整上下间距的时候,突然想到没定义height  字符所以会跑到换行  赶紧定义height  ok了 显示完美了. 

也就是说在FF中不允许程序员“偷懒”,该写的一定要写。但是在IE就比较适合喜欢“偷懒”的程序员

作者:wzhiu 发表于2013-2-28 17:42:30 原文链接
阅读:0 评论:0 查看评论

    
[3]事件兼容方法
    来源:    发布时间: 2013-11-06

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;
    }
}

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
sqlserver iis7站长之家
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3