div+css和javascript技巧和使用注意事项 — div+css使用技巧,javascript使用技巧和方法
div+css和javascript技巧和使用注意事项
摘要：div+css和javascript技巧和使用注意事项,div+css使用技巧,javascript使用技巧和方法,因公司要求分享自己的网站建设经验，本人分享06年来总结记忆的div+css和javascript使用技巧和注意事项，其中包括了如何让div+css兼容居多浏览器，和一些javascript特效。
最近公司要求每个同事都把新学到的和以前总结到的经验都分享到公司网站上来
所以我这里给大家分享一些div+css使用技巧，包括javascript使用技巧
有些是很常用的一些技巧，可能只有技术人员才能看的懂了。
以下是技巧内容：
<obj.i++){
<document.links.i++){
<obj.i++){
<o.cells.i++){
<anchors.i++){
<link rel="ShortCut Icon" href="favicon.ico" favorite
IE:&param name="wmode" value="opaque" /&
FF:&embed wmode="opaque" /&
和flash透明一样：
IE:&param name="wmode" value="transparnet" /&
FF:&embed wmode="transparnet" /&
ie6中的双边bug解决方法：display:inline
js获取css中的float属性：（ie中用cssFloat,FF中用styleFloat）
ie中取消选择---onselectstart=return false
ff中取消选择---css中定义:* {-moz-user-select:none}
下面例子比较ie和ff中document.getElementsByName()的区别:
&input type="radio" name="aa" /&
&input type="radio" name="aa" /&
&input type="radio" name="aa" /&
&div name="aa"&&/div&
&div id="aa"&&/div&
&div id="aa"&&/div&
&script type="text/javascript"&
window.onload=function(){
&&& alert(document.getElementsByName("aa").length)
&/script&----------ie中获取的是id的obj（但包括name为radio checkbox等项）,ff中获取的只是name项
这中思想蛮不错的：
if(low=true){
if(w&=10){
&&& low=false
if(w&=100){
&&& low=true
if(low=false){
js弹出链接文本内容
&script language="javascript"&
function altername(evt){
&&& evt=evt?evt:window.event
&&& if(document.all){
&&& &&& alert(evt.srcElement.innerHTML)
&&& &&& alert(evt.target.innerHTML)
window.onload=function(){
var obj=document.getElementsByTagName("a")
for(i=0;i&obj.i++){
&&& obj[i].onmouseover=altername
&a href=""&baidu&/a&&br&
&a href=""&google&/a&&br&
&a href=""&blueidea&/a&&br&
&a href=""&crsky&/a&
//主要考察event.srcElement和evt.target
js用for in 遍历整个数组：
for(i in aa){
&&& document.write(i)
js用toLocaleString()获取整个时间:
var qq=new Date()
qq.toLocaleString()
//或者写法如下：
var qq=new Date()
var nian=qq.getFulllYear()
var yue=qq.getMonths()
var ri=qq.getDate()
var xingqi=qq.getDay()
var hour=qq.getHours()
var minute=qq.getMinutes()
var second=qq.getSeconds()
var millisecond=qq.getMilliseconds()
数组的定义 :
var aa=new Array()
var aa=new Array("","","")
aa=["","",""]
var aa=["0","1","2"]
aa[0][0]=""
aa[0][1]=""
aa[1][0]=""
aa[1][1]=""
aa[2][0]=""
aa[2][1]=""
asp中定义数组:
IE：attachEvent
&&& 例如在body中单击的时候弹出”你好“，我们可以这么做
首先定义一个函数：
&&& function alert_hello(){
&&& &&& alert("你好")
&&& document.body.attachEvent("onclick",alert_hello)
需要注意的是：
&&& 1:在绑定的时候一定不能这样写：alert_hello()
&&& 2:最好在外部定义alert_hello这个函数
如果在内部定义则：document.body.attachEvent("onclick",function(){"alert('hello')"})
FF：addEventListener
&&& 同样实现在IE中的效果的时候这样做即可：
&&& function alert_hello(){
&&& &&& alert("你好")
&&& document.body.addEventListener("click",alert_hello,false)
以下为一个对象绑定:(ff和ie中都需要：div必须写在前面，如果是ie，这个时候把div放在后面的话，可以在声明语言的时候加入defer)
&div id="xx"&hello&/div&
&script language="javascript"&
function aa(){
&&&&&& alert("hello")
document.getElementById("xx").addEventListener("click",aa,false)
IE和FF中的区别:
1:如果要执行的函数不止一个，例如：
&&& &&& document.body.attachEvent("onclick",aa1)
&&& &&& document.body.attachEvent("onclick",aa2)
&&& &&& document.body.attachEvent("onclick",aa3)
&&& 即：body要同时绑定aa1,aa2,aa3这个三个函数，
这个时候，IE和FF中的解释循序是不一样的，
&&& ie：aa1,aa2,aa3
&&& ff：aa3,aa2,aa1
2:在ie中是要写全时间名：例如，onclick，而ff中只要写click即可。。。
3：ie中绑定的时候比ff少一个参数,区别如下代码:
&style type="text/css"&
&&& width:500
&&& height:500
&&& background:
&&& width:200
&&& height:200
&&& background:
&div id="aa"&d
&div id="qq" &d&/div&
&script language="javascript"&
function al(){
&&&&&& alert("hello")
document.getElementById("aa").addEventListener("click",al,true)
//试试false和true的区别
HTML页面标准排版：
body.style.padding---页面中body的padding（例如在body的style中写：padding:20px）
body.style.border---页面中body的border（例如在body的style中写：border:20px）
body.clientLeft---页面中body的（左）border宽度
body.clientTop---页面中body的（上）border宽度
body.clientWidth---页面中body的宽度
body.offsetWidth---页面中body的宽度+边框长度(即body.clientWidth+边框长度)
body.scrollWidth---页面中body出现滚动条时候的实际长度，当没有滚动条的时候body.scollWidth和body.clientWidth是相等的
(IE和FF中两者是相反的概念)
body.clientHeight& //同上
body.offsetHeight& //同上
body.scrollHeight //同上
div.style.border---div中的border（有两个参数：width,height）
div.style.padding---div中padding的值
div.style.left---div距离页面左边的距离(这个参数有三个类似的写法：具体如下：（先要明白.style.left返回的值是一个字符串，如果没有，返回空串）
1：div.style.posLeft---就是将left的值转化为数值类型，而且是浮点型
2: div.style.pixelLeft---是数值，是将left的值(如果是空串则赋为0)转化为像素值
&&& 注意;parseInt(posLeft)==pixelLeft
3: div.offsetLeft---返回对象距离窗口左边的距离（带边框+padding）
ff中是没有1，2两个参数的，要应用的话一般统一用offsetLeft
offsetLeft通常用于取值，而left则应用于赋值计算
例如：先通过offsetLeft取到div距离页面的距离x,然后在通过div.style.left=x+10+"px"将div往右移动10个PX，而在实际应用的时候一定要加上"px"(因为left的返回值为字符串)
div.style.Top //同div.style.Left用法相同
div.offsetLeft//同div.offsetTop用法相同
注意：div.style.left是div距离页面左边的距离（不附带padding）
&&&&& div.offsetLeft是div距离页面左边的距离（附带padding）
div.clientTop---返回div（上）border的高度
div.clientLeft---返回div（左）border的宽度
div.clientWidth---返回div宽度(包括padding，不包括border和滚动条的宽度)
div.clientHeight---返回div高度(包括padding，不包括border和滚动条的高度度)
div.scrollWidth---返回div中实际的高度(带滚动的高度)
div.scrollHeight---返回div中实际的高度(带滚动的高度)
---详细分析见：
/18/a/f8/40/sarten/_0..jpg
IE:setCapture和releseCapture
FF:captureEvents和releaseEvents
setCapture主要是为某个对象或页面绑定一个事件，这个时间的主要目的就是为了能够在整个窗口下都可以起做用：比如下面的代码:
&script type="text/javascript" defer&
&&& document.getElementById("xx").setCapture()
id="xx"&hello&/div&
这样就可以在页面中任何部位单击一次就可以弹出hello。。。
ff下和ie下的理解不一样，可以这样理解：（用上例子讲解）
ie是对某个特定对象xx进行全屏捕捉，当设定setCapture时候，就可以在全屏捕捉到xx。。。单击的时候也会执行xx设定的单击执行的事件（函数）。。。可以全屏获取鼠标的位置
而ff中只是window.captureEvents...作用域是对整个页面（只是可以全屏获取鼠标的位置）
creatElement(为页面创建对象)
appendChild(为页面应用某个创建的对象)
例子1:在页面中创建一个table要求有一个单元格，一行，一个table文字
&script language="javascript" defer&
var tb=document.createElement("table")
var tbd=document.createElement("tbody")
var tr=document.createElement("tr")
var td=document.createElement("td")
var txt=document.createTextNode("table")
&&& td.appendChild(txt)
&&& tr.appendChild(td)
&&& tbd.appendChild(tr)
&&& tb.appendChild(tbd)
&&& document.body.appendChild(tb)//对应下面两行
&div id="tt"&&/div&//在指定的div中应用：document.getElementById("tt").appendChild(tb)
例子2:创建一个input对象radio，默认选中
&script type="text/javascript" defer&
var pt=document.createElement("input")
pt.type="radio"//写在对象创建之后
document.body.appendChild(pt)
pt.checked="checked"//pt.setAttribute("checked",true)
text/radio/checkbox/file/hidden/submit/button/reset的创建都是和上例差不多，
需要注意的是：必须将.type写在紧跟对象创建之后，然后应用，在之后设置属性（也可以用setAttibute）
例子3：创建一个select对象
&script lanuguage="javascript" defer&
var se=document.createElement("select")
se.options[0]=new Option("123","123")
se.options[1]=new Option("456","456")
se.options[2]=new Option("789","789")
document.body.appendChild(se)
se.setAttribute("id","cre_se")
se.onchange=function(){
&&& alert(se.options[document.getElementById('cre_se').selectedIndex].value)
createPopup:创建一个提示框（也相对于一个页面，当popup失去焦点的时候---popup消失）
&script type="text/javascript" defer&
var pp=window.createPopup()
pp.document.body.style.background="#efefef"
pp.document.body.style.border="1px solid black"
pp.document.body.innerHTML="this is a popup"
pp.show(10,20,250,20,document.getElementById("popup_div"))
&div id="popup_div" style="width:500height:50position:top:50left:50background:red"&&/div&
ff下的添加收藏夹：
window.sidebar.addpanel("百度","","")
ie下的添加收藏夹
window.external.addfavorite("","百度")
滚动到页面指定位置:scrollIntoView()
&a href="#" id="xx"&内容&/a&&br&
&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&&a href="#"&内容&/a&&br&
&a href="javascript:document.getElementById('xx').scrollIntoView()"&内容&/a&&br&
&a name="top"&top&/a&
&a href="#top"&go_top&/a&
createTextRange()//ie专有
例子1：（主要说明：textrange.text和textrange.htmltext的区别）
&script language="javascript" defer&
function test()
var rng=document.body.createTextRange()
alert(rng.text)
function test1()
var rng=document.body.createTextRange()
alert(rng.htmlText)
&input type="button"
value="text"&
&input type="button"
value="htmlText"&
//如果为某个对象创建textrange的话，，，text和htmlText是没有区别的
如果是为整个body创建的话是有区别的（text表示文本内容，htmlText把整个页面代码输出）
例子2：获取指定文本框中的选中的文字：只响应第一个文本框
&script language="javascript" defer&
function test()
var o = document.getElementById("inp1").createTextRange()//改为inp2的话就不响应了
var r = document.selection.createRange()//为选中的文字创建一个虚礼空间存起来（也是一个对象）
if(o.inRange(r)){//在已经创建的textrange中查找range对象（createtextRange.inRange(createRange)）
&&& alert(r.text)//弹出createRange的文本createRange.text
&input id="inp1" type="text" value=""&
&input id="inp2" type="text" value=""&
&input type="button"
value="确定"&
例子3：点击复制功能:
&script language="javascript"&
function copyContent(obj){
&&& obj.select()
&&& var cont=obj.createTextRange()
&&& cont.execCommand("copy")
//或者这样写：
//obj.select()
//obj.document.execCommad("copy")
&input type="text" value="what you want to copy !" &
iframe允许背景颜色为透明：
&iframe src="xx.html" allowtransparency="true"&
//xx.html中必须这样写：&body bgColor="transparent"&
ie:window.eval("ID")//用来获取页面中id的对象，相当于document.getElementById("id")
ff:window.eval("alert('xx')","javascript")//执行js代码，也可以执行asp代码
ie:window.execScript("alert('xx')","javascript")//执行js代码，也可以执行asp代码
文本框不自动提示:
&input type="text" autocomplete="off"&
隐藏按钮点击时的虚线：
&input type="button" hidefocus="hidefocus" value="按钮"&
&input type="button" onfocus="this.blur()" value="按钮"&
脚本永不提示出错:
&script language="javascript"&
window.onerror=function(){
&&& return false
事件对象返回值：
srcElement.returnVlaue="false/true"
通过id获取某个对象：
通用:document.getElementById("idname")
ie:window.eval("idname")
通过name获取对象
document.getElementsByName("name")
通过tagname获取对象
document.getElementsByTagName("tagname")
通过事件获取对象：
window.event.srcElement//是一个对象
window.event.srcElement.tagName//获取到的对象的标签名
obj.parentNode()(dom)
obj.parentElement(dhtml)
obj.childNodes()
1：绝对的body位置：
ie:event.clientX& event.clientY
ff:event.clientX& event.clientY
2：相对的body位置：
ie:event.x& event.y
ff:event.pageX& event.pageY
3：绝对的鼠标body中停留的位置：
ie:event.offsetX& event.offsetY
ff:event.layerX& event.layerY
4：整个页面绝对位置:
screen.x&&&&&&&&& screen.y
例子：动态获取鼠标在页面中的坐标位置
&script language="javascript"&
function movemouse(evt){
&&& evt=evt?evt:window.event
&&& var x=evt.clientX
&&& var y=evt.clientY
document.getElementById("con").innerHTML="x: "+x+"y: "+y
document.getElementById("con").style.left=x+"px"
document.getElementById("con").style.top=y+"px"
document.onmousemove=movemouse
&div id="con" style="position:height:20width:100"&&/div&
类似：动态时间
&script language="javascript"&
function aa(){&&&
&&& var date=new Date()
&&& document.body.innerHTML=date.toLocaleString()
&&& setTimeout("aa()",1000)
window.onload=aa
双击滚屏代码:
&script language="javascript"&
scrollTo(0,0)
function scroll_start(){
var x=document.body.scrollTop
window.scroll(0,++x)
st=setTimeout("scroll_start()",10)//不能写出var st=...
if(x!=document.body.scrollTop){
stop_scroll()
function stop_scroll(){
clearTimeout(st)
document.onmousedown=stop_scroll
document.ondblclick=scroll_start
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
页面中鼠标操作：
oncontextmenu//右键
onselectstart//选中
oncopy//复制
onpaste//粘贴
oncut//剪切
ondragstart//拖动
document.images[索引]
document.窗体.elements[索引]
浏览器名称
document.navigator.appName
document.navigator.plugins
转向制定页面:
window.navigate("")
window.location.href=""
符合标准的去除链接虚线两种方式:
1:通过links（窗体链接）
&script type="text/javascript"&
function aa(){
&&& for(i=0;i&document.links.i++){
&&& &&& document.links[i].onfocus=function(){
&&& &&& &&& this.blur()
window.onload=aa
2:通过链接a对象
&script language="javascript"&
aa=function(){
&&& var obj=document.getElementsByTagName("a")
&&& for(i=0;i&obj.i++){
&&& &&& obj[i].onfocus=function qq(){
&&& &&& &&& this.blur()
window.onload=aa
文本值改变的时候：
&input type="text" onpropertychange="alert('值改变了')"&
窗口的父对象:
window.opener
框架的父对象：
window.parent
给文本增加链接：
&script language="javascript" defer&
var text="百度"
text=text.link("")
document.write(text)
////////////////////////////实例：
&script language="javascript" defer&
var pic="&img src=''&"
pic=pic.link("")
document.write(pic)
获取css样式表
document.stylesheets[索引].rules[索引]//获取第几个&style type="text/css"&&/style&里的第几个样式
document.stylesheets[索引].rules[索引].selectorText//获取css样式名称
document.stylesheets[索引].rules[索引].style.cssText//获取css样式内容
body {color:red}
p {color:blue}
span {color:red}
table {color:blue}
页面z坐标（z-index）：//对象的z-index坐标必须在absolute情况下才能起作用
&style type="text/css"&
&&& width:200
&&& height:200
&&& position:
&&& left:100
&&& top:100
&&& background:red
&&& width:200
&&& height:200
&&& position:
&&& left:200
&&& top:200
&&& background:
&script type="text/javascript"&
var firstIndex=1
function zIndexChange(obj){
&&& document.getElementById(obj).style.zIndex=firstIndex
&&& firstIndex++
&div id="pagea" &页面a&/div&
&div id="pageb" &页面b&/div&
按住鼠标左键N秒执行:
&script language="javascript"&
var timerAl
function al(){
&&& alert("您按住鼠标2秒没动!请放松，谢谢!")
document.onmousedown=function(){
&&& timerAl=setTimeout("al()",2000)//此处一定不能加var ，加了表示每次执行的时候都从新声明
document.onmouseup=function(){
&&& clearTimeout(timerAl)
本地实现图片现实:
&script language="javascript"&
function getError(){
imgdiv.innerHTML=''
alert("格式错误或者不存在这个文件")
function checkSize(obj){
var w=obj.clientWidth
var h=obj.clientHeight
if(w&164){
obj.width=164
obj.heigth=164/w*h
function showImg(filesrc){
imgdiv.innerHTML="&img id='tu' src='file:///"+filesrc+"' onerror='getError()' onload='checkSize(this)'&"
&input type="file" size=25 onchange="showImg(this.value)"&&br&&br&&br&&br&
&div id="imgdiv" align="center"&&/div&
表格的相关操作:
1：左右移动表格行：(表格外)
&script language="javascript"&
function tb1doTr(obj){
var tr=document.createElement("&tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb2doTr(this)'&&/tr&")
var td1=document.createElement("&td align='center'&&/td&")
var td2=document.createElement("&td align='center'&&/td&")
var text1=document.createTextNode(obj.cells[0].innerHTML)
var text2=document.createTextNode(obj.cells[1].innerHTML)
td1.appendChild(text1)
td2.appendChild(text2)
tr.appendChild(td1)
tr.appendChild(td2)
document.getElementById("tb2_tbody").appendChild(tr)
document.getElementById("tb1").deleteRow(obj.rowIndex)
function tb2doTr(o){
&&& tr=document.getElementById("tb1").insertRow()
&&& tr.bgColor="#efefef"
&&& tr.onmouseover=function(){this.bgColor="#efef00"}
&&& tr.onmouseout=function(){this.bgColor="#efefef"}
&&& tr.onclick=function(){tb1doTr(this)}
&&& for(i=0;i&o.cells.i++){
&&& &&& var td=tr.insertCell()
&&& &&& td.innerHTML=o.cells[i].innerHTML
&&& document.getElementById("tb2").deleteRow(o.rowIndex)
&table cellpadding="0" cellspacing="0" border="1" width="300" id="tb1" style="float:text-align:center"&
&&& &td bgcolor="#efefef" align="center"&行&/td&
&&& &td bgcolor="#efefef" align="center"&值&/td&
&script type="text/javascript"&
for(i=1;i&=20;i++){
&&& document.write("&tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb1doTr(this)'&&td align='center'&第"+i+"行&/td&&td align='center'&第"+i+"行的值&/td&&/tr&")
&table cellpadding="0" cellspacing="0" border="1" width="300" id="tb2" style="text-align:center"&
&tbody id="tb2_tbody"&
&&& &td bgcolor="#efefef" align="center"&行&/td&
&&& &td bgcolor="#efefef" align="center"&值&/td&
2:移动表格行的位置（表格内）
单击文字保存图片:
&iframe height="0" width="0" src="偷拍的.jpg" id="saveImage"&&/iframe&
&a href="###" &Click Me&/a&
//这里千万不能写出：document.getElementById('saveImage')
单元格颜色渐退：
&script type="text/javascript"&
function changeColor(){
&&& var obj=document.getElementById("tb1")
&&& obj.bgColor="rgb(100%,"+m+"%,100%)"
&&& var st=setTimeout("changeColor()",10)
&&& if(m&100){
&&& &&& clearTimeout(st)
&&& &&& m=60
&&& &&& obj.bgColor="#efefef"
&table cellpadding=0 cellspacing=0 width=100 border=0&
&tr&&td bgcolor="#efefef"
onmouseout="changeColor()" id="tb1"&&&/td&&/tr&
&a href="#"&&/a&
&a href="html.exe"&&/a&
&a href="mailto:?cc=&subject='你好'&body='你好啊'"&&/a&
&a href="#ffff"&&/a&
&a name="ffff"&&/a&
&a href="javascript:alert('你好')"&&/a&
&a href="####"&&/a&
&a href="javascript:void(0)"&&/a&
&a href="javascript:void(null)"&&/a&
&a href="javascript:;"&&/a&
&a href="#" &&/a&
&span style="cursor:hand"&&/span&
a:link {font-size:12color:text-decoration:font-style:italic}
a:link {font-size:14color:font-weight:text-decoration:font-style:normal}
a:link {font-size:12font-family:华文行楷;font-weight:color:text-decoration:overline}
style="writing-mode:tb-rl"
style="writing-mode:lr-tb"
&select onchange="document.body.style.background=this.options[this.selectedIndex].value"&
&option value=url(1.jpg)&背景1
&option value=url(2.jpg)&背景2
&option value=url(3.jpg)&背景3
&/select&&/form&
&link href="" rel="shortcut icon"&
&link href="" rel="bookmark"&
&link href="css文件地址" rel="stylesheet"&
&style type="text/css"&
&span style="css样式内容"&&/span&
&style style="text/css"&
@import url("")
text-decoration:none
text-decoration:overline
text-decoration:underline
text-underline-position:above/below(IE专有属性)
text-decoration:line-through
text-transform:uppercase/lowercase/capitalize
font-size:大小
font-family:字体
font-style:normal/italic
font-weight:normal/bold/bolder/lighter
line-height:120%
writing-mode:tb-rl/lr-tb
text-indent:?px
综合&& font:样式 变形 加粗 字号/行高 字体
& example----font:italic bold 12px/120% 华文行楷
&&&&&&&&&&& 定义&&&&&&&&&& 调用
&&&&&&&&&&&
&&&&&&&&&&& .css1 {}&&&&&&&& class=css1
&&&&&&&&&&& #css2 {}&&&&&&&& id=css2
&&&&&&&&&&& table {}&&&&&&&& 说明table 中的所有属性
&&&&&&&&&&& table#css1 {}&&& table中的所有css1都有这个属性&& id=css1
&&&&&&&&&&& table.css1 {}&&& table中的所有css1都有这个属性&& class=css1
&&&&&&&&&&& body,table,input {}&& table和body和input都有这个属性&&&&&&&
&&&&&&&&&&& table #css1&&&&&&&&&& table中其他标签拥有的属性&& &table&...&span id=css1
&&&&&&&&&&& table .css1&&&&&&&&&& table中其他标签拥有的属性&& &table&...&span class=css1
vaspace hspace width heigth dynsrc src lowsrc alt
input type="text/password/radio/checkbox/sunmit/file/hidden/botton"
select option
i b u strike & & & & & &copy
在网页中加入html代码只要在代码前后加入：&xmp&和&/xmp&就可以了
size color
basefont color:...&&&&&& base href=""&&&&& base target="_top"
table td tr:
align=center/right/left&& leftmargin&& topmargin&& cursor&& oncontextmenu
ondragstart oncopy oncut onpaste onselectstart bgcolor background
width heigth id cellpadding cellspacing border
loop=-1/infinite&& balance&& volume&& autostart&&
direction:up/down/left/right
align:center/right/left/right
behavior:scroll slide alternate
vspace hspace height width bgcolor
scrolldelay&& scrollamount
&span title="你好"&你好&/span&
&span onmouseout="window.status=''"
style="cursor:hand"&&/span&
favicon.icon&&&&& &link href="" rel="shortcut icon"&
oncontextmenu="return false"
ondraystart="return false"
onselectstart="return false"
oncopy="return false"
onpaste="return false"
oncut="return false"
&meta name="description" content="内容"
&meta name="keywords" conternt="内容"
&meta name="author" content="张虹亮"
&meta http-equiv="page-enter" content="revealtrans(duration='3';transition='23')"
&meta http-equiv="page-exit" content="revealtrans(duration='3';transition='23')"
&meta http-equiv="content-type" content="text/charset=gb2312"
取消表单按下时的虚线
&input type=radio hidefocus=true name=sex&你好
&input type=radio name=sex onfocus="this.blur()"&你不好
&input type="submit" &&/form&
a的全写:anchor
&base target="_top"&防止点击链接时新窗口都是在顶部打开
&p&&br&比&br&&p&多一行
如何让网页中的广告自动关闭：
---在网页广告条的网页head和/head中加入：
&script language="javascript"&
function close(){
setTimeout("self.close()",5000)
}//本网页自动在5秒钟关闭
function close(){
self.close()
setinterval("close()",5000)
frameset frame iframe:
border bordercolor src name rows cols framespacing frameborder
flash透明:
&param name="wmode" value="transparent"&
半透明的表格：
&table cellpadding=0 cellspacing=0 width=200 height=100&&tr&&td style="background-color:filter:alpha(opacity=20)"&&&/td&&/tr&&/table&
阴影表格：
&div style="filter:shadow(color=red,direction=120);width=200;padding-right:10;padding-bottom:10"&
&table cellpadding=0 cellspacing=0 width=200 height=100 bgcolor=red&&tr&&td&&&/td&&/tr&&/table&&/div&
特色的表单：
&input type="button" value="空的" disabled&
&input type="text" value="520" readonly&
&input type="text" size=30 style="border-top:1border-bottom:1border-right:1border-left:1"
&embed src="" width height&
&bgsound src="" loop=-1/infinite autostart=false/true&
&param name="wmode" value="transparent"&
背景更换效果
&style type="text/css"&
.css1 {background-image:url("1.jpg")}
.css2 {background-image:url("2.jpg")}
&table&&tr&&td onmouseout="this.className='css1'" &sage&/td&&/tr&&/table&
&script language="javascript"&
function closewindow(){
window.opener=null
window.close()
调用:&form&&input type="button" &&/form&
鼠标指向时变背景颜色的表格
&table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20&&tr&&td
onmouseout="this.bgColor='#333333'" bgcolor="#ffffff"&&/td&&/tr&&/table&
细线表格1：
&table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20&&tr&&td bgcolor="#fffff"&&/td&&/tr&&/table&
细线表格2：
&table border=1 bordercolor="#000000" width=100 height=20&&tr bordercolor="#ffffff"&&td&&/td&&/tr&&/table&
细线表格3：
&input type="text" size=12 readonly="readonly"&
&input type="text" size=12 disabled="disabled"&
凹下的立体表格:
&table width="100" border="1" cellspacing="1" cellpadding="0" bgcolor=red&
&tr&&td bgcolor="#ff3333"&&&&/td&&td bgcolor="#ff3333"&&&&/td&&/tr&
&tr&&td bgcolor="#ff3333"&&&&/td&&td bgcolor="#ff3333"&&&&/td&&/tr&
&tr&&td bgcolor="#ff3333"&&&&/td&&td bgcolor="#ff3333"&&&&/td&&/tr&
凸出的立体表格:
&table width="100" border="1" cellspacing="0" cellpadding="0" bordercolorlight=#333333 bordercolordark=#efefef&
&tr&&td bgcolor="#FF0000"&&&&/td&&td bgcolor="#FF0000"&&&&/td&&/tr&
&tr&&td bgcolor="#FF0000"&&&&/td&&td bgcolor="#FF0000"&&&&/td&&/tr&
&tr&&td bgcolor="#FF0000""&&&&/td&&td bgcolor="#FF0000"&&&&/td&&/tr&
有间距的表格:
&table width="100" border="1" cellspacing="5" cellpadding="0" bgcolor=gray&
&tr&&td bgcolor="#999999"&&&&/td&&/tr&
&link rel="Shortcut Icon" href="favicon.ico"& IE地址栏前换成自己的图标
&link rel="Bookmark" href="favicon.ico"& 可以在收藏夹中显示出你的图标
&input style="ime-mode:disabled"& 关闭中文输入法
防止别人frame你的网页:
&script language="javascript"&
if(top.location!=self.location){
top.location=self.location
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
&table border oncontextmenu=return(false)&&td&no&/table& 可用于Table
2. &body onselectstart="return false"& 取消选取、防止复制
3. onpaste="return false" 不准粘贴
4. oncopy="" oncut="" 防止复制
5. &link rel="Shortcut Icon" href="favicon.ico"& IE地址栏前换成自己的图标
6. &link rel="Bookmark" href="favicon.ico"& 可以在收藏夹中显示出你的图标
7. &input style="ime-mode:disabled"& 关闭输入法
8. 永远都会带着框架
&script language="JavaScript"&&!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --&&/script&
9. 防止被人frame
&SCRIPT LANGUAGE=JAVASCRIPT&&!--
if (top.location != self.location)top.location=self.
// --&&/SCRIPT&
10. 网页将不能被另存为
&noscript&&iframe src=*.html&&/iframe&&/noscript&
11. &input type=button value=查看网页源代码
12.删除时确认
&a href='javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"'&删除&/a&
&a href="return confirm("确认删除吗？")"
13. 取得控件的绝对位置
//Javascript
&script language="Javascript"&
function getIE(e){
var t=e.offsetT
var l=e.offsetL
while(e=e.offsetParent){
t+=e.offsetT
l+=e.offsetL
alert("top="+t+"/nleft="+l);
//VBScript
&script language="VBScript"&&!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName&&"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--&&/script&
14. 光标是停在文本框文字的最后
&script language="javascript"&
function cc()
var e = event.srcE
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
&input type=text name=text1 value="123" onfocus="cc()"&
15. 判断上一页的来源
javascript:document.referrer
16. 最小化、最大化、关闭窗口
&object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-3B7A11"&
&param name="Command" value="Minimize"&&/object&
&object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-3B7A11"&
&param name="Command" value="Maximize"&&/object&
&OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-3b7a11"&
&PARAM NAME="Command" VALUE="Close"&&/OBJECT&
&input type=button value=最小化 onclick=hh1.Click()&
&input type=button value=最大化 onclick=hh2.Click()&
&input type=button value=关闭 onclick=hh3.Click()&
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT　CTRL
document.onkeydown=
18. 网页不会被缓存
&META HTTP-EQUIV="pragma" CONTENT="no-cache"&
&META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"&
&META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb :57 GMT"&
或者&META HTTP-EQUIV="expires" CONTENT="0"&
19.怎样让表单没有凹凸感？
&input type=text style="border:1 solid #000000"&
&input type=text style="border-left: border-right: border-top: border-bottom: 1 solid #000000"&&/textarea&
20.&div&&span&&&layer&的区别？
&div&(division)用来定义大段的页面元素，会产生转行
&span&用来定义同一行内的元素，跟&div&的唯一区别是不产生转行
&layer&是ns的标记，ie不支持，相当于&div&
21.让弹出窗口总是在最后面:
&body onblur="this.focus();"&
22.不要滚动条?
让竖条没有:
&body style='overflow:overflow-y:hidden'&
让横条没有:
&body style='overflow:overflow-x:hidden'&
两个都去掉？更简单了
&body scroll="no"&
23.怎样去掉图片链接点击后，图片周围的虚线？
&a href="#" onFocus="this.blur()"&&img src="logo.jpg" border=0&&/a&
24.电子邮件处理提交表单
&form name="form1" method="post" action="mailt****@***.com" enctype="text/plain"&
&input type=submit&
25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
26.如何设定打开页面的大小
打开页面的位置&body &
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
{background-image:url(logo.gif); background-repeat:no-
background-position:background-attachment: fixed}
28. 检查一段字符串是否全由数字组成
&script language="Javascript"&&!--
function checkNum(str){return str.match(\/D\)==null}
alert(checkNum(""))
alert(checkNum(""))
// --&&/script&
29. 获得一个窗口的大小
document.body.clientW document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");
31.TEXTAREA自适应文字行数的多少
&textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"&
&/textarea&
32. 日期减去天数等于第二个日期
&script language=Javascript&
function cc(dd,dadd)
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
cc("12/23/2002",2)
33. 选择了哪一个Radio
&HTML&&script language="vbscript"&
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
end function
&/script&&BODY&
&INPUT name="radio1" type="radio" value="style" checked&Style
&INPUT name="radio1" type="radio" value="barcode"&Barcode
&INPUT type="button" value="check" &
&/BODY&&/HTML&
34.脚本永不出错
&SCRIPT LANGUAGE="JavaScript"&
function killErrors() {
window.onerror = killE
35.ENTER键可以让光标移到下一个输入框
&input onkeydown="if(event.keyCode==13)event.keyCode=9"&
window.event.returnvalue="false"
window.event事件可以返回值，，，
window.event.srcElement.returnValue=""
例子：&body ontextmenu="window.event.returnvalue='false'"&//禁止鼠标右键
判断上一页的来源:javascript:document.
让网页不被别人 iframe:
&&& if(top.location!=self.location){
&&& &&& top.location=self.location
让页面打开最大化:
window.resizeTo(screen.width,screen.height)
window.moveTo(0,0)
//相关函数:window.moveTo,window.moveBy,window.resizeTo,window.resizeTo
javascipt相关对象:
math.max(x,y)
math.min(x,y)
math.ceil(x)
math.floor(x)
math.sqrt(x)
math.round(x,y)
math.random()
var qq=new Date()
qq.getYear()
qq.getFullYear()
qq.getMonth()
qq.getDay()
qq.getDate()
qq.getHours()
qq.getMinutes()
qq.getSeconds()
qq.getMilliSeconds()
qq.getTime()
string.link()
string.fontsize()
string.fontcolor()
string.bold()
string.sup()/上标
string.sub()/下标
string.toUpperCase()
string.toLowerCase()
string.Indexof()
string.charAt()
string.charCodeAt()
string.substr()
string.substring()
string.fromCharCode()
string.search()
链接a的全写:anchor
在html和xml中相关字符引用:
如果要在html网页中加入html标签代码（大量）,加&xmp&&/xmp&
iframe控制父窗口:window.parent.
父窗口控制子页面:window.子页面名称
用js保护网页中邮箱:
name="icyzhl"
witch="163"
&&& document.write("&a href='mailto:"+icyzhl+"@"+witch+".com+"'&")
&&& docuemnt.write("&/a&")
marquee标记用法:
direction:up/left/right/
behavior:slide/scroll/
bgsound:infinite/loop=-1& autostart&& src&&
符合标准的打开新窗口
var anchors=document.getElementsByTagName("a")
for(i=0;i&anchors.i++){
&&& obj=anchors[i]
&&& if(obj.getAttribute("href") && obj.getAttribute("rel")=="external"){
&&& &&& obj.target="_blank"
textarea自动高度
&textarea style="overflow-y:visible"&
sdagdsg文字内容
&/textarea&
隐藏表单按下的虚线;
&input type="radio" hidefocus="hidefocus"&
&input type="radio" onfocus="this.blur()"&
&input type="text" value="xagd" disabled="disabled"&
&input type="text" value="xagd" readonly="readonly"&
文本值发生改变:
&input type="text" onpropertychange="alert('xx')"&
不能为中文:
&input type="text" style="ime-mode:disabled"&
收藏夹个性图标:
&link rel="ShortCut Icon" href="favicon.ico"////favorite
以上div+css技巧和javascript技巧如果大家有什么意见可以联系我本人哈.
</anchors.i++){
</o.cells.i++){
</obj.i++){
</document.links.i++){
</obj.i++){
相关的新闻