以获取背景颜色为例

html部分

<div id="test">abcd</div>

css部分

#test {
    background-color: rgba(255, 0, 0, 0.5);
}

JS部分

var testDom = document.getElementById('test');
console.log(testDom.ownerDocument.defaultView.getComputedStyle(testDom,null).backgroundColor);

DOM.style只能获取内联的样式,所以只能通过上面的方法,在chrome浏览器中读取元素节点的样式。

相应的API,window.getComputedStyle()

chrome中获取元素的样式的更多相关文章

  1. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  2. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  3. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

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

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

  5. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  6. 获取元素计算样式getComputedStyle()与currentStyle

    window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...

  7. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  8. javascript中获取元素尺寸

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 屏幕可用工作区宽度:window.screen.availHeight,和浏览器无关,屏幕相关屏幕可用工作区高度:wind ...

  9. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

随机推荐

  1. 网络爬虫:使用Scrapy框架编写一个抓取书籍信息的爬虫服务

      上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...

  2. Effective前端1:能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  3. NginxWeb服务器安装

    1.   安装编译工具和库文件 [root@bigdata-51cdh opt]# yum -y install make zlib zlib-devel gcc-c++ libtool  opens ...

  4. React-Native学习系列(一)

    近段时间一直在忙,所以博客也没有更新,这两天我翻了一下写的这几篇博客,感觉写的都很片面,所以,我想重新写一个系列教程,从最基础的开始,来让大家更容易学会React-Native. 这个系列大部分只介绍 ...

  5. c++ builder TIdHttp 获取不到cookie

    用c++ builder 的TIdHttp组件Get一个ASP.Net MVC服务器的一个页面,获取页面中Cookie信息,修改后Post到服务器上去. 在本地调试的时候可以获取到,部署到服务器上就获 ...

  6. angular2 service component

    [component 需要通过 service 提供的接口 得到一些数据.这是最佳实践.] [由于 有 component 和 service 两个语义,所以出现了下面两种办法] 一,[service ...

  7. Atitit.可视化与报表原理与概论

    Atitit.可视化与报表原理与概论 1.  信息可视化1 2. Gui可视化1 3. 报表系统(三大图表,金字塔,组织结构图等)1 4. <可视化数据>目录3 5. 可视化的具体实现(c ...

  8. CSS代码规范

    空格 选择器 与 { 之间必须包含空格. 列表型属性值 书写在单行时,, 后必须跟一个空格. 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格. margin: 0; .+ ...

  9. 菜鸟快飞之JavaScript函数

    1.复制变量值 在说函数前,我觉得需要先说说关于变量值的复制,以便后面的理解. 复制基本类型的值: 当一个变量复制另外一个值为基本类型的变量时,两个变量可以参与任何操作而不会互相影响 var num1 ...

  10. Android Weekly Notes Issue #233

    Android Weekly Issue #233 November 27th, 2016 Android Weekly Issue #233 本期内容包括: 用Mockito做RxJava的单元测试 ...