在JS中需要获取某个元素的宽高或者是绝对定位的位置信息，通常我们会这么写：
var elemWidth = elem.style.width; console.log(elemWidth); //(空字符串)
然而我们会发现什么也没获取到，这到底是什么原因？
我们仔细观察一下我们是怎么获取这些信息的。通过元素的 style 属性，获取一个关于元素样式信息的对象，在里面取我们需要的样式信息。而我们是不是理所当然的认为我们写在 style 标签内的样式，或者通过 link 引入的样式表的样式信息都存在了元素的 style 这个属性中？
很遗憾，并不是这样，我们再想想我们什么时候对元素的 style 属性进行了修改。相信大家都写过内联样式，例如：
<div class="exp" style=" 100px;">举个栗子</div>
这时候我们再来获取下元素的宽：
var elemWidth = document.querySelector(".exp").style.width; console.log(elemWidth); //100px
相信看到这你们也知道是怎么回事了，只有在内联样式中定义的样式才能在JS中通过元素的 style 属性取得。
三种样式的优先级也不是不同的，一般来说，（外部样式）External style sheet <（内部样式）Internal stylesheet <（内联样式）Inlinestyle，当然这样的条件是引进的外部样式位置是位于内部样式之前的
情况一：宽高都写在样式表里，即外部样式或嵌入式样式，比如#div1{120px;}。这种情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。
情况二：宽和高是写在行内中，即内联式样式，比如style="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="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='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{ 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{
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方法是相对于父元素的偏移