文章目录 106 a的索引问题 107 使用DOM操作CSS 108 读取元素当前的样式 109 getStyle() 110 其他样式操作的属性 滚动条练习
<! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < scripttype = " text/javascript" > window. onload = function ( ) { var allA = document. getElementsByTagName ( "a" ) ; for ( var i = 0 ; i < allA. length; i++ ) { alert ( "for循环正在执行" + i) ; allA[ i] . onclick = function ( ) { alert ( "响应函数正在执行" + i) ; console. log ( allA[ i] == this ) ; return false ; } ; } } ; </ script> </ head> < body> < tableid = " employeeTable" > < tr> < th> </ th> < th> </ th> < th> </ th> < th> </ th> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < ahref = " javascript:;" > </ a> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < ahref = " deleteEmp?id=002" > </ a> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < ahref = " deleteEmp?id=003" > </ a> </ td> </ tr> </ table> < divid = " formDiv" > < h4> </ h4> < table> < tr> < tdclass = " word" > </ td> < tdclass = " inp" > < inputtype = " text" name = " empName" id = " empName" /> </ td> </ tr> < tr> < tdclass = " word" > </ td> < tdclass = " inp" > < inputtype = " text" name = " email" id = " email" /> </ td> </ tr> < tr> < tdclass = " word" > </ td> < tdclass = " inp" > < inputtype = " text" name = " salary" id = " salary" /> </ td> </ tr> < tr> < tdcolspan = " 2" align = " center" > < buttonid = " addEmpButton" value = " abc" > </ button> </ td> </ tr> </ table> </ div> </ body> </ html> <! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < styletype = " text/css" > #box1 { width : 200px; height : 200px; background-color : red; <!--background-color : red !important ; -->} </ style> < scripttype = " text/javascript" > window. onload = function ( ) { var box1 = document. getElementById ( "box1" ) ; var btn01 = document. getElementById ( "btn01" ) ; btn01. onclick = function ( ) { box1. style. width = "300px" ; box1. style. height = "300px" ; box1. style. backgroundColor = "yellow" ; } ; var btn02 = document. getElementById ( "btn02" ) ; btn02. onclick = function ( ) { alert ( box1. style. width) ; } ; } ; </ script> </ head> < body> < buttonid = " btn01" > </ button> < buttonid = " btn02" > </ button> < divid = " box1" > </ div> </ body> </ html> <! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < styletype = " text/css" > #box1 { width : 100px; height : 100px; background-color : yellow; } </ style> < scripttype = " text/javascript" > window. onload = function ( ) { var box1 = document. getElementById ( "box1" ) ; var btn01 = document. getElementById ( "btn01" ) ; btn01. onclick = function ( ) { alert ( box1. currentStyle. width) ; alert ( getStyle ( box1, "width" ) ) ; } ; } ; function getStyle ( obj, name ) { } </ script> </ head> < body> < buttonid = " btn01" > </ button> < divid = " box1" style = " width : 200px; background-color : red; " > </ div> </ body> </ html> <! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < styletype = " text/css" > #box1 { width : 100px; height : 100px; background-color : yellow; } </ style> < scripttype = " text/javascript" > window. onload = function ( ) { var box1 = document. getElementById ( "box1" ) ; var btn01 = document. getElementById ( "btn01" ) ; btn01. onclick = function ( ) { var v = getStyle ( box1, "width" ) ; alert ( v) ; } ; } ; function getStyle ( obj, name ) { if ( window. getComputedStyle) { return getComputedStyle ( obj, null ) [ name] ; } else { return obj. currentStyle[ name] ; } } </ script> </ head> < body> < buttonid = " btn01" > </ button> < divid = " box1" style = " width : 200px; background-color : red; " > </ div> </ body> </ html> <! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < styletype = " text/css" > #box1 { width : 100px; height : 100px; background-color : red; padding : 10px; border : 10px solid yellow; } # box2 { padding : 100px; background-color : #bfa; } # box4 { width : 200px; height : 300px; background-color : #bfa; overflow : auto; } # box5 { width : 150px; height : 600px; background-color : yellow; } </ style> < scripttype = " text/javascript" > window. onload = function ( ) { var box1 = document. getElementById ( "box1" ) ; var btn01 = document. getElementById ( "btn01" ) ; var box4 = document. getElementById ( "box4" ) ; btn01. onclick = function ( ) { alert ( box1. clientWidth) ; alert ( box1. clientHeight) ; alert ( box1. offsetWidth) ; var op = box1. offsetParent; alert ( op. id) ; alert ( box1. offsetLeft) ; alert ( box4. scrollHeight) ; alert ( box4. scrollLeft) ; alert ( box4. scrollTop) ; alert ( box4. scrollHeight) ; alert ( box4. scrollHeight - box4. scrollTop) ; alert ( box4. scrollHeight - box4. scrollTop) ; } ; } ; </ script> </ head> < body> < buttonid = " btn01" > </ button> < br> < divid = " box4" > < divid = " box5" > </ div> </ div> < br> < divid = " box3" style = " position : relative; " > < divid = " box2" style = " position : relative; " > < divid = " box1" > </ div> </ div> </ div> </ body> </ html> <! DOCTYPE html > < html> < head> < title> </ title> < metacharset = " utf-8" > < styletype = " text/css" > #info { width : 300px; height : 500px; background-color : #bfa; overflow : auto; } </ style> < scripttype = " text/javascript" > window. onload = function ( ) { var info = document. getElementById ( "info" ) ; var inputs = document. getElementsByTagName ( "input" ) ; info. onscroll = function ( ) { if ( info. scrollHeight - info. scrollTop == info. clientHeight) { inputs[ 0 ] . disabled = false ; inputs[ 1 ] . disabled = false ; } } ; } ; </ script> </ head> < body> < h3> </ h3> < pid = " info" > </ p> < inputtype = " checkbox" disabled = " disabled" /> < inputtype = " submit" value = " 注册" disabled = " disabled" /> </ body> </ html> 
)
