js 中 操作元素樣式 通過js修改元素內聯樣式（設置和讀取的都是內聯樣式） 獲取當前元素顯示的樣式 <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box1 { width: ...
- js 中 操作元素樣式
- 通過js修改元素內聯樣式（設置和讀取的都是內聯樣式）
- 獲取當前元素顯示的樣式
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box1 { width: 200px; height: 200px; background-color: aquamarine; } </style> <body> <button type="button" id="btn1">點我下1</button> <button type="button" id="btn2">點我下2</button> <button type="button" id="btn3">點我下3</button> <br><br> <div id="box1"> </div> </body> <script type="text/javascript"> window.onload = function() { var btn01 = document.getElementById("btn1"); var box01 = document.getElementById("box1"); btn01.onclick = function() { /* 通過js修改元素內聯樣式: 語法: 元素對象.style.樣式名 = 樣式值 樣式名： background-color 是不符合的， 需要改為駝峰命名： backgroundColor 註意： 這種方法設置和讀取的都是內聯樣式 */ box01.style.width = "400px"; box01.style.height = "400px"; box01.style.backgroundColor = "red"; } /* 獲取當前元素顯示的樣式： 語法: 元素對象.currentStyle.樣式名 。 此方法只有IE瀏覽器支持 其他瀏覽器獲取樣式： getComputedStyle(元素對象,null).樣式名 ; */ var btn2 = document.getElementById("btn2"); btn2.onclick = function() { alert(box01.currentStyle.width); } var btn3 = document.getElementById("btn3"); btn3.onclick = function() { var style_obj = getComputedStyle(box1, null); alert(style_obj.width); } } </script> </html>
- js 中 事件對象
- 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象作為實參傳遞進響應函數
- 在這個事件對象中封裝了當前事件相關的一切信息（滑鼠的坐標、鍵盤那個鍵被按下，滑鼠滾動的方向等）
- 註意: 在ie8及以下瀏覽器中，響應函數觸發時，不會傳遞事件對象。 事件對象是作為window對象的屬性來存儲的。
- 以一個滑鼠移入某個區域後顯示x、y坐標為例子
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #areaDiv { width: 200px; height: 100px; border: black 3px solid; margin-bottom: 10px; } #showMsg { width: 200px; height: 30px; border: black 3px solid; } </style> <body> <div id="areaDiv"></div> <div id="showMsg"></div> </body> <script type="text/javascript"> var areaDiv = document.getElementById('areaDiv'); var showMsg = document.getElementById('showMsg'); /* onmousemove 事件： 滑鼠在元素中移動時觸發 事件對象： 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象作為實參傳遞進響應函數 在這個事件對象中封裝了當前事件相關的一切信息（滑鼠的坐標、鍵盤那個鍵被按下，滑鼠滾動的方向等） note: 在ie8及以下瀏覽器中，響應函數觸發時，不會傳遞事件對象。 事件對象是作為window對象的屬性來存儲的。 */ areaDiv.onmousemove = function(e) { // 解決事件對象相容性問題： 兩種寫法： // if (!e) { // e = window.e; // } e = e || window.e; showMsg.innerHTML = 'x坐標：' + e.clientX + ',y坐標：' + e.clientY; } areaDiv.onmouseout = function() { showMsg.innerHTML = ''; } </script> </html>
- 滑鼠移動事件，實現某個div跟隨滑鼠移動（複製代碼運行直接看效果更直觀）
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box { position: absolute; width: 50px; height: 50px; background-color: #7FFFD4; } </style> <body style="height: 1200px;"> <div id="box"> </div> </body> <script type="text/javascript"> /* clientX 和 clientY 是獲取當前可見頁視窗的坐標 pageX 和 pageY 是獲取相對當前頁面的坐標 （當頁面可以往下滾動時，需要使用這個獲取坐標）,但是在IE8中不支持 */ document.onmousemove = function(e) { /* 獲取滾動條高度 IE和火狐不識別滾動條屬於body的， 谷歌、edge可以識別。 IE和火狐認為滾動條屬於html的。documentElement，但是edge識別不了html的滾動條 */ var st = document.body.scrollTop || document.documentElement.scrollTop; e = e || window.e; var box = document.getElementById('box'); box.style.left = e.clientX + 'px'; box.style.top = e.clientY + st + 'px'; } </script> </html>
