在JS中需要獲取某個元素的寬高或者是絕對定位的位置信息，通常我們會這么寫：
var elemWidth = elem.style.width; console.log(elemWidth); //(空字符串)
然而我們會發現什么也沒獲取到，這到底是什么原因？
我們仔細觀察一下我們是怎么獲取這些信息的。通過元素的 style 屬性，獲取一個關於元素樣式信息的對象，在里面取我們需要的樣式信息。而我們是不是理所當然的認為我們寫在 style 標簽內的樣式，或者通過 link 引入的樣式表的樣式信息都存在了元素的 style 這個屬性中？
很遺憾，並不是這樣，我們再想想我們什么時候對元素的 style 屬性進行了修改。相信大家都寫過內聯樣式，例如：
<div class="exp" style="width: 100px;">舉個栗子</div>
這時候我們再來獲取下元素的寬：
var elemWidth = document.querySelector(".exp").style.width; console.log(elemWidth); //100px
相信看到這你們也知道是怎么回事了，只有在內聯樣式中定義的樣式才能在JS中通過元素的 style 屬性取得。
三種樣式的優先級也不是不同的，一般來說，（外部樣式）External style sheet <（內部樣式）Internal stylesheet <（內聯樣式）Inlinestyle，當然這樣的條件是引進的外部樣式位置是位於內部樣式之前的
情況一：寬高都寫在樣式表里，即外部樣式或嵌入式樣式，比如#div1{width:120px;}。這種情況通過#div1.style.width拿不到寬度，而通過#div1.offsetWidth才可以獲取到寬度。
情況二：寬和高是寫在行內中，即內聯式樣式，比如style="width:120px;"，這中情況通過上述2個方法都能拿到寬度。
因為id.offsetWidth和id.offsetHeight無視樣式寫在樣式表還是行內，所以我們獲取元素寬和高的時候最好用這2個屬性。注意如果不是寫在行內style中的屬性都不能通過id.style.atrr來獲取。
代碼：
var $ = document.getElementById("view"); var h = $.offsetHeight; //高度 var w = $.offsetWidth; //寬度
現在的前端制作很少直接把樣式寫style里了，都是寫在樣式表里。如果你要獲取的樣式沒有相對應（即#div1.style.width與#div1.offsetWidth的值不等，因為offset計算時包括padding和border），就只能分別針對不用瀏覽器來獲取樣式表的屬性了，方法如下：
//ie8及以前版本：通過currentStyle
alert(document.getElementById('id').currentStyle.width);
//ff,safari,opera,chrome,ie9及之后版本:通過window.getComputedStyle
var el=document.getElementById('id');
alert(window.getComputedStyle(el,null).width);
var oBox = document.getElementById('box'); //獲取樣式 getComputedStyle(oBox).width //可以alert彈出下結果看看
一、 行內元素樣式獲取：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js獲取外部樣式</title> </head> <body> <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div> </body> <script> //獲取行間樣式 var div = document.getElementById('div'); var width = div.style.width; alert(width);//200px </script> </html>
在JS代碼中，alert會彈出div元素的width為200px；達到了要獲取元素寬度的目的，但是這種簡單的方法只適用於獲取元素的行內元素樣式，並不能獲取內部樣式和外部樣式，在項目中，寫入行內元素這種方案並不被大家認同，所以這種方法，只是讓大家了解下。
二、 非行間樣式元素獲取：
如果元素樣式並非行間樣式，利用上面這種方法並不能獲取到元素的樣式，需要使用另一種方法：
getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，
返回的是一個CSS樣式聲明對象 ， 只讀， 此方法支持Firefox瀏覽器;
語法：var style=window.getComputedStyle(“元素”，“偽類”);第一個參數是必須的，第二個為可選的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js獲取內部部樣式</title> <style> #div{ width: 200px; height: 200px; border:3px solid cyan; } </style> </head> <body> <div id="div""></div> </body> <script> var div = document.getElementById('div'); //獲取div的width var width = window.getComputedStyle(div,null).width; alert(width);//200px //修改div的width div.style.cssText='width:300px;' </script> </html>
在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐 谷歌 IE9 獲取的為計算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,並不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.
var box=document.getElementById("box"); var txt=document.getElementById("txt"); var dome=window.getComputedStyle(txt,"null"); console.log(dome.color); //rgb(255,0,0);
getComputedStyle方法獲取到的顏色樣式為rgb（）的樣式，但是getComputedStyle()方法不能設置元素css樣式，只能進行獲取。
getComputedStyle方法有兩個參數：第一個參數為要獲取計算樣式的元素，第二個參數可以是null、空字符串、偽類(如:before,:after)，這兩個參數缺一不可。
三 、兼容性:
前段潛規則,凡是好的東西都不能通用,是的,你猜對了,任性的IE並不能使用以上方法,但是IE有自己的方法為currentStyle,用法一樣,就不再贅述了,下面直接寫出已經處理兼容的代碼如下:
currentStyle方法是IE瀏覽器下的專屬用法。
currentStyle 是一款可以兼容IE瀏覽器的屬性返回的是當前所有最終使用的CSS屬性值，
利用element.CurrentStyle.attribute可獲取
其與getComputedStyle區別：1、 currentStyle不支持偽類樣式獲取；
2、currentStyle不支持現代瀏覽器，支持IE
var div = document.getElementById('div'); if (div.currentStyle) { console.log(div.currentStyle.width); }else{ console.log(getComputedStyle(div,null).width); }
<style> #box{ width:100px; } </style> <div id="box">1</div> <script> var oBox = document.getElementById('box'); //獲取樣式 oBox.currentStyle.width; //可以alert彈出下結果看看 </script>
這個方法，用alert彈出的時候會發現在IE以外的瀏覽器中彈出來的均為undefined，可以知道，他只支持IE瀏覽器，並且測試之后發現支持IE8及以上。
getComputedStyle()和Obj.currentStyle這兩種方法，一個完美兼容IE8+，一個兼容其余瀏覽器，所以可以用if判斷下，當前瀏覽器是否為IE然后采用不同的獲取方法（也就是判斷是否支持Obj.currentStyle方法）
function getStyle(obj,attr){ if(obj.currentStyle){ //如果支持obj.currentStyle方法 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj)[attr]; }; }; //簡寫成三目： function gStyle( obj , attr ){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }; //把這兩種方法整合成一個function之后，可以采用傳參的方法來獲取元素樣式 getStyle(oBox,'width'); //獲取oBox的width
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div1{
width:100px;height:100px;background: red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
/*
只能獲取，不能設置
獲取到的是計算后的樣式
最好不要獲取復合樣式
所獲取的樣式要設初使值
獲取到的樣式類型是字符串
別空格 [' width']
*獲取到的樣式帶px的
transform 獲取不到
transition 不准確
*/
function getStyle(obj,attr){
if(obj.currentStyle){ //IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,"偽類")[attr]; //Firefox
}
}
alert(getStyle(oDiv1,'background'));</html></span>
方法封裝:
function getStyle(obj,name){ if (obj.currentStyle) { return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }
JS和JQuery設置/獲取CSS屬性區別
JS:
function attribute() { var val=document.getElementById("in1").value, a1=document.getElementById("a1"), d2=document.getElementById("d2"); //第一種直接設置本身自有屬性方法 a1.href="https://www."+val+".com"; //第二種設置自定義屬性方法 d2.setAttribute("url","https://www."+val+".com"); //獲取選中屬性的值 var d1Url=d1.getAttribute("url"); console.log(d1Url); //設置樣式 d2.style.background="#FAB2C9"; }
JQuery:在jQuery下直接使用$("element").css("屬性"，"設置的值"),進行獲取和修改。
通篇代碼：
//設置屬性、值 $("#a2").attr("href","http://www.w3school.com.cn/"); //同時設定多個 $("#a2").attr({ "data-num":"50", "target":"view_window" }); //獲取選擇屬性的值： var a2Href=$("#a2").attr("href"); console.log("a2鏈接地址為："+a2Href); //設定樣式 $("#d2").css("border","5px solid #8E00FF"); //同時設定多個 $("#d2").css({ "width" : "200", "height" : "50", "background":"#E058EA" });
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d1{ width:200px;height:50px; } </style> </head> <body> <div> <h3>JavaScript</h3> <input type="text" id="in1" value="baidu"/> <div id="d1"></div> <a href="#" id="a1">超鏈接</a> </div> <hr> <div> <h3>jQuery</h3> <a href="#" id="a2">點我跳轉</a> <div id="d2"></div> </div> <script> function attribute() { var val=document.getElementById("in1").value,a1=document.getElementById("a1"),d1=document.getElementById("d1"); //第一種設置本身自有屬性方法 a1.href="https://www."+val+".com"; //第二種設置自定義屬性方法 d1.setAttribute("url","https://www."+val+".com"); //獲取選中屬性的值 var d1Url=d1.getAttribute("url"); console.log(d1Url); //設置樣式 d1.style.background="#FAB2C9"; } attribute(); </script> <script src="jquery-1.12.4.min.js"></script> <script> //設置屬性、值 $("#a2").attr("href","http://www.w3school.com.cn/"); //同時設定多個 $("#a2").attr({ "data-num":"50", "target":"view_window" }); //獲取選擇屬性的值： var a2Href=$("#a2").attr("href"); console.log("a2鏈接地址為："+a2Href); //設定樣式 $("#d2").css("border","5px solid #8E00FF"); //同時設定多個 $("#d2").css({ "width" : "200", "height" : "50", "background":"#E058EA" }); </script> </body> </html>
JQuery：
在jQuery中,提供了attr函數來操作元素屬性,具體如下:
函數名 說明 例子 attr(name) 取得第一個匹配元素的屬性值. $("input").attr("value")attr(property) 將一個"名/值"形式的對象設置為所有匹配元素的屬性 $("input").attr({ value: "txt", title: "text" });attr(key,value) 為所有匹配的元素設置一個屬性值 $("input").attr("value","txt");attr(key,fn) 為所有匹配的元素設置一個計算的屬性值 $("input").attr("title", function () { return this.value });removeAttr(name) 從所有匹配的元素中刪除一個屬性 $("input").removeAttr("value");
注意:
1.如果要設置對象的class屬性時,必須使用className作為屬性名.
2.我們可以使用removeAttr刪除元素屬性,但其對應的Dom屬性是不會被刪除掉的,只是被改變其值而已
根據上面的幾個函數,我們可以這樣使用來獲取dom的value值和innerHTML值:
$("#txt1").attr("value") $("#txt1").attr("value", "1234"); $("#dv1").attr("innerHTML", 'this is a div'); $("#dv1").attr("innerHTML");
實際上,jQuery提供了更簡單的方法來訪問value,innerHTML,具體函數如下:
函數名 說明 例子 val() 獲取第一個匹配元素的value值 $("#txt1").val()val(val) 為匹配的元素設置value值 $("#txt1").val("txt1")html() 獲取第一個匹配元素的html內容 $("#dv1").html()html(val) 設置每一個匹配的元素的html內容 $("#dv1").html("this is a div")text() 取得所有匹配文本節點的內容,並將其連接起來 $("div").text()text(val) 將所有匹配元素的置為val $("div").text("divs")
使用jQuery操作CSS
1.修改CSS類
函數名 說明 例子 addClass(classes) 為每個匹配的元素添加指定的類名 $("input").addClass("colorRed borderBlack");hasClass(class) 判斷匹配元素集合中是否至少有一個包含了指定的css類,如果有一個含有指定css類,則返回true alert($("input").hasClass("borderBlack"));removeClass([classes]) 從匹配元素中移除所有或指定的css類 $("input").removeClass("colorRed borderBlack");toggleClass(classes) 如果存在(不存在)就刪除(添加)指定類 $("input").toggleClass("colorRed borderBlack");toggleClass(classes,switch) 當switch是true時,添加類,switch為false時,刪除類 $("input").toggleClass("colorRed borderBlack", true);注意:
1.addClass、removeClass、toggleClass均可添加多個類,多個類之間用空格隔開
2.removeClass方法的參數可選,如果有參數,則刪除指定class,如果無參數,則刪除匹配元素的所有class
3.在調用toggleClass(classes,switch)時,我們可以有更多的用法,例如:
//每當按鈕被點擊三次時,添加樣式 var i = 0; $("#btn").click(function () { $("input").toggleClass("colorRed borderBlack", true); });
2.修改CSS樣式
函數名 說明 例子 css(name) 訪問第一個匹配元素的樣式屬性 $("input").css("color")css(properties) 把一個"名/值"對設置給所有匹配元素的樣式屬性 $("input").css({border:"solid 3px silver",color:"red"})css(name,value) 為匹配的元素設置同一個樣式屬性
如果是數字,將自動轉換為像素值$("input").css("border-width","5");
注意:
對於樣式值為數字的代碼示例及結果:
示例 生成的源碼 $("input").css("border-width","5");<</span>input style="BORDER-RIGHT-WIDTH: 5px; BORDER-TOP-WIDTH: 5px; BORDER-BOTTOM-WIDTH: 5px; BORDER-LEFT-WIDTH: 5px" id="txt1" />
注意:
對於一些常用的屬性,例如width,height之類,使用attr("width")和css("width")是無法正常獲取其值的,現在,我們來介紹一些常用的屬性.
獲取常用的屬性
1.寬、高相關
函數名 說明 例子 width() 獲取第一個匹配元素的寬度,默認為px $("#txt1").width()width(val) 為匹配的元素設置寬度值,默認為px $("#txt1").width(200)height() 獲取第一個匹配元素的高度,默認為px $("#txt1").height()height(val) 為匹配的元素設置寬度值,默認為px $("#txt1").height(20)innerWidth() 獲取第一個匹配元素內部區域寬度(包括padding,不包括border) $("#txt1").innerWidth()innerHeight() 獲取第一個匹配元素內部區域高度(包括padding,不包括border) $("#txt1").innerHeight()outerWidth([margin]) 獲取第一個匹配元素外部區域寬度(包括padding,border)
margin為true則包括margin,否則不包括$("#txt1").outerWidth()outerHeight([margin]) 獲取第一個匹配元素外部區域高度(包括padding,border)
margin為true則包括margin,否則不包括$("#txt1").outerHeight(true)注意:
返回的高度、寬度均為數字,不帶px
參照一張圖,會更容易理解些.
2.位置相關
在設計一些彈出對象的腳本中,經常需要動態獲取彈出坐標並且設置元素的位置.jQuery為我們提供了位置相關的各個函數.
函數名 說明 例子 offset() 獲取匹配元素在當前窗口的相對偏移
只對可見元素有效$("#btn").offset().top $("#btn").offset().leftposition() 獲取匹配元素相對父元素的偏移
只對可見元素有效$("#btn").position().top $("#btn").position().leftscrollTop() 獲取匹配元素相對滾動條頂部的偏移
對可見元素和隱藏元素均有效$("div").scrollTop()scrollTop(val) 設置垂直滾動條頂部偏移為該值
對可見元素和隱藏元素均有效$("div").scrollTop(200)scrollLeft() 獲取匹配元素相對滾動條左部的偏移
對可見元素和隱藏元素均有效$("div").scrollLeft()scrollLeft(val) 設置水平滾動條左側的偏移
對可見元素和隱藏元素均有效$("div").scrollLeft(200)
注意:
offset方法是相對於當前窗口的相對偏移,而position方法是相對於父元素的偏移