正文

【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

IP云
IP云V管理员/5 阅读
08/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在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.getComputedStylevar 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().left

position()获取匹配元素相对父元素的偏移
只对可见元素有效

$("#btn").position().top
$("#btn").position().left

scrollTop()获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效

$("div").scrollTop()

scrollTop(val)设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效

$("div").scrollTop(200)

scrollLeft()获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效

$("div").scrollLeft()

scrollLeft(val)设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效

$("div").scrollLeft(200)

注意:

offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移