原文链接https://www.w3ctech.com/topic/40

我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值呢?

原生JS方法

可以使用document.defaultView提供的getComputedStyle()方法。该方法接受两个参数:需要取得计算样式的元素和一个伪元素字符串(例":after")。如果不需要伪元素信息,第二个参数为null。代码示例如下:

var idVal = document.getElementById("test");
var computedStyle = document.defaultView.getComputedStyle(idVal, null); console.log(computedStyle.backgroundColor);
console.log(computedStyle.width);
console.log(computedStyle.height);
console.log(computedStyle.border);

IE11以前的版本不支持getComputedStyle()方法,不过他提供的另外一个方法可以实现我们想要的结果,这就是:currentStyle。代码示例如下:

var idVal = document.getElementById("test");
var computedStyle = idVal.currentStyle; alert(computedStyle.backgroundColor);
alert(computedStyle.width);
alert(computedStyle.height);
alert(computedStyle.border);

jQuery获取计算样式的方法

#("#id").css("width");

注意:IE没有返回border的值为空。

还需要注意的事,不管在什么浏览器中,获取到的计算的样式都是只读的;不能修改计算后样式对象中的CSS属性。此外,计算后的样式也包含属于浏览器内部样式表的样式信息,因此任何具有默认值的CSS属性都会表现在计算后的样式中。CSS属性的默认值在不同浏览器中可能是不同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。

JavaScript获取元素CSS计算后的样式的更多相关文章

  1. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  2. JavaScript获取元素CSS属性

    function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute]:documen ...

  3. JS获取对象在内存中计算后的样式

    通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.curre ...

  4. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  5. 前端笔记之JavaScript(八)关于元素&计算后的样式

    一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...

  6. JavaScript的DOM_通过计算后样式来获取

    虽然可以通过 style 来获取单一值的 CSS 样式,但对于复合值的样式信息,就需要通过计算样式来获取. DOM2 级样式,window 对象下提供了 getComputedStyle()方法.接受 ...

  7. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  8. JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

    获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...

  9. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

随机推荐

  1. exp/expdp 与 imp/impdp命令导入导出数据库详解

    一.exp命令导出数据库 如何使exp的帮助以不同的字符集显示:set nls_lang=simplified chinese_china.zhs16gbk,通过设置环境变量,可以让exp的帮助以中文 ...

  2. django websocket

    1.dwebsocket 2.等框架都是错误的 3.  django/channels 才是正确姿势 555 4. pip install -U channels 完成后,您应该添加channels到 ...

  3. DAY1_PYTHON基础作业

    ''' print("1.使用while循环输入 1 2 3 4 5 6 8 9 10") count = 1 while count < 11: print(count) ...

  4. How To Make A Swipeable Table View Cell With Actions – Without Going Nuts With Scroll Views

    How To Make A Swipeable Table View Cell With Actions – Without Going Nuts With Scroll Views  Ellen S ...

  5. C#中的Cookie

    cookie属性: name字段为一个cookie的名称. value字段为一个cookie的值. domain字段为可以访问此cookie的域名. path字段为可以访问此cookie的页面路径. ...

  6. mac系统访问windows共享文件夹

    1. 打开finder 2. 找到前往 - 连接服务器 3. 打开后,输入smb://ip地址  点击连接 4. 选择共享文件夹 5. 点击好,之后就可以了,如下图

  7. paddlepaddle

    1. 训练过程中cost出现nan 可能是因为有脏数据,寻找脏数据的方法就是,设置batch_size=1, paddle.reader.shuffle 中buf_size=1 一条一条的进行训练,看 ...

  8. vue 项目搭建步骤

    环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...

  9. webpack 插件库

    webpack常用的插件安装命令 webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:np ...

  10. STL标准模板类

    STL,中文名标准模板库,是一套C++的标准模板类(是类!),包含一些模板类和函数,提供常用的算法和数据结构. STL分为:迭代器,容器,适配器,算法以及函数对象. --迭代器是一种检查容器内元素并遍 ...