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

时间：2022-06-09 00:41:37

在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

参照一张图,会更容易理解些.

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

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方法是相对于父元素的偏移

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

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. 获取css的属性值

    # -*- coding:utf-8 -*- """ 在元素上执行双击操作 """ from selenium import webdriv ...

  3. js 获取 this 的属性 obj&lbrack;0&rsqb;&period;getAttribute

    js  获取 this 的属性 obj[0].getAttribute

  4. js获取css样式方法

    一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...

  5. js获取对象的属性个数

    for (var i = 0; i < dt.length; i++) { if (Object.keys(dt[i]).length <= 1) { dt.splice(i, 1); i ...

  6. Django加入JS，CSS，图片等外部文件的方法

    Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...

  7. js获取css的各种样式并且设置他们

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...

  8. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  9. js获取和设置属性的方法

    function square(num){    var total = num*num;//局部变量    return total;}var total = 50;//全局变量var number ...

随机推荐

  1. oracle学习笔记

    --Oracle查询当前版本select * from v$version;----------Oracle 查询服务器端编码----------select * from v$nls_paramet ...

  2. 编写一个JAVA小程序取得IP地址

    在TCP/IP 互联网时,经常会需要查询自己主机的IP地址和www服务器的IP地址.虽然,我们可以使用IPCONFIG 和PING 进行IP地址查询,但是如果在应用程序或APPLET中使用此命令会破坏 ...

  3. hdu 4559 涂色游戏 博弈论

    构造SG函数:sg[i]表示2*i的sg值!! 代码如下: #include<iostream> #include<stdio.h> #include<algorithm ...

  4. C&num;下利用封包、拆包原理解决Socket粘包、半包问题（新手篇）

    介于网络上充斥着大量的含糊其辞的Socket初级教程,扰乱着新手的学习方向,我来扼要的教一下新手应该怎么合理的处理Socket这个玩意儿. 一般来说,教你C#下Socket编程的老师,很少会教你如何解 ...

  5. Dom4j之xPath

    XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...

  6. java中JSON转换

    1.JSON介绍 JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定的符 ...

  7. Springboot关于脚本脚本启动的项目：

    #!/bin/bash if [ -f ~/.bash_profile ];then  . ~/.bash_profilefi JAVA_HOME=/usr/local/usr_software/jd ...

  8. &lbrack;Swift&rsqb;LeetCode325&period; 最大子数组之和为k &dollar; Maximum Size Subarray Sum Equals k

    Given an array nums and a target value k, find the maximum length of a subarray that sums to k. If t ...

  9. Linux下实现ssh免密认证

    添加域名映射 配置ssh免密登陆 拷贝master服务器公钥至本机 验证master服务器ssh免密登录其余服务器 添加域名映射 打开hosts文件 Vim /etc/hosts 添加域名对象 配置s ...

  10. openwrt编译e2fsprogs-1&period;43时报错misc&sol;create&lowbar;inode&period;c&colon;399&colon;18&colon; error&colon; conflicting types for &&num;39&semi;copy&lowbar;file&lowbar;range&&num;39&semi;

    1. 详细报错信息 misc/create_inode.c:399:18: error: conflicting types for 'copy_file_range' static errcode_ ...

相关文章