<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ 1、設置內聯樣式 /* * 點擊按鈕以后，修改box1的大小 */ //獲取box1 var box1 = document.getElementById("box1"); //為按鈕綁定單擊響應函數 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //修改box1的寬度 /* * 通過JS修改元素的樣式： * 語法：元素.style.樣式名 = 樣式值 （樣式值是字符串） * * 注意：如果CSS的樣式名中含有-， * 這種名稱在JS中是不合法的比如background-color，- 是運算符 * 需要將這種樣式名修改為駝峰命名法， * 去掉-，然后將-后的字母大寫 * * 我們通過style屬性設置的樣式都是內聯樣式， * 而內聯樣式有較高的優先級，所以通過JS修改的樣式往往會立即顯示 * * 但是如果在樣式中寫了!important，則此時樣式會有最高的優先級， * 即使通過JS也不能覆蓋該樣式，此時將會導致JS修改樣式失效 * 所以盡量不要為樣式添加!important * box1.style.backgroundColor = "yellow" ! important; */ box1.style.width = "300px"; box1.style.height = "300px"; box1.style.backgroundColor = "yellow"; }; 2.獲取內聯樣式 //點擊按鈕2以后，讀取元素的樣式 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //讀取box1的樣式 /* * 語法：元素.style.樣式名 （字符串） * * 通過style屬性設置和讀取的都是內聯樣式 * 無法讀取樣式表中的樣式 */ //alert(box1.style.height); alert(box1.style.width); }; }; </script> </head> <body> <button id="btn01">點我一下</button> <button id="btn02">點我一下2</button> <br /><br /> <div id="box1"></div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//點擊按鈕以后讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//讀取box1的寬度
//alert(box1.style.width);
3、獲取元素當前的樣式
/*
* 獲取元素的當前顯示的樣式
* 語法：元素.currentStyle.樣式名
* 它可以用來讀取當前元素正在顯示的樣式
* 如果當前元素沒有設置該樣式，則獲取它的默認值
*
* currentStyle只有IE瀏覽器支持，其他的瀏覽器都不支持
*/
//alert(box1.currentStyle.width);
//box1.currentStyle.width = "200px";
//alert(box1.currentStyle.backgroundColor);
/*
* 在其他瀏覽器中可以使用
* getComputedStyle()這個方法來獲取元素當前的樣式
* 這個方法是window的方法，可以直接使用
* 需要兩個參數
* 第一個：要獲取樣式的元素
* 第二個：可以傳遞一個偽元素，一般都傳null
*
* 該方法會返回一個對象，對象中封裝了當前元素對應的樣式
* 可以通過對象.樣式名來讀取樣式
* 如果獲取的樣式沒有設置，則會獲取到當前樣式的實際值，而不是默認值
* 比如：沒有設置width，它不會獲取到auto，而是一個當前長度
*
* 但是該方法不支持IE8及以下的瀏覽器
*
* 通過currentStyle和getComputedStyle()讀取到的樣式都是只讀的，
* 不能修改，如果要修改必須通過style屬性
*/
//var obj = getComputedStyle(box1,null);
/*alert(getComputedStyle(box1,null).width);*/
//正常瀏覽器的方式
//alert(getComputedStyle(box1,null).backgroundColor);
//IE8的方式
//alert(box1.currentStyle.backgroundColor);
//alert(getStyle(box1,"width"));
var w = getStyle(box1,"width");
alert(w);
};
};
/*
* 自定義一個函數，用來獲取指定元素的當前的樣式，解決IE8 和其他瀏覽器的兼容問題
* 參數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){ //getComputedStyle變量在IE 8 中未定義，會報錯，程序無法執行，
//window.getComputedStyle 這是為window對象動態增加一個getComputedStyle屬性，在IE 8 中getComputedStyle屬性未找到，會返回undefined，是false
// 把變量轉換成屬性來判斷 注意 getComputedStyle() 和 getComputedStyle的區別 一個是方法 一個是變量 名字一樣
//正常瀏覽器的方式，具有getComputedStyle()方法 getComputedStyle(obj , null).name寫死了，name是變量，接收字符串，可以用類似數據的方式訪問對象的屬性
return getComputedStyle(obj , null)[name]; //getComputedStyle(box1,null).backgroundColor 變量的訪問方式
}else{
//IE8的方式，沒有getComputedStyle()方法
return obj.currentStyle[name];
}
//簡寫
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">點我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
4、其他樣式操作屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="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: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var box4 = document.getElementById("box4");
btn01.onclick = function(){
/*
* clientWidth
* clientHeight
* - 這兩個屬性可以獲取元素的可見寬度和高度
* - 這些屬性都是不帶px的，返回都是一個數字，可以直接進行計算
* - 會獲取元素寬度和高度，包括內容區和內邊距
* - 這些屬性都是只讀的，不能修改
*/
//alert(box1.clientWidth);
//alert(box1.clientHeight);
//box1.clientHeight = 300;
/*
* offsetWidth
* offsetHeight
* - 獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
*/
//alert(box1.offsetWidth);
/*
* offsetParent
* - 可以用來獲取當前元素的定位父元素
* - 會獲取到離當前元素最近的開啟了定位的祖先元素
* 如果所有的祖先元素都沒有開啟定位，則返回body
*/
var op = box1.offsetParent;
//alert(op.id);
/*
* offsetLeft
* - 當前元素相對於其定位父元素的水平偏移量
* offsetTop
* - 當前元素相對於其定位父元素的垂直偏移量
*/
//alert(box1.offsetLeft);
/*
* scrollWidth
* scrollHeight
* - 可以獲取元素整個滾動區域的寬度和高度
*/
//alert(box4.clientHeight);
//alert(box4.scrollWidth);
/*
* scrollLeft
* - 可以獲取水平滾動條滾動的距離
* scrollTop
* - 可以獲取垂直滾動條滾動的距離
*/
//alert(box4.scrollLeft);
//alert(box4.scrollTop);
//alert(box4.clientHeight); // 283
//當滿足scrollHeight - scrollTop == clientHeight
//說明垂直滾動條滾動到底了
//當滿足scrollWidth - scrollLeft == clientWidth
//說明水平滾動條滾動到底
//alert(box4.scrollHeight - box4.scrollTop); // 600
};
};
</script>
</head>
<body id="body">
<button id="btn01">點我一下</button>
<br /><br />
<div id="box4">
<div id="box5"></div>
</div>
<br /><br />
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>