利用原生JavaScript获取样式的方式小结

利用原生JavaScript获取样式的方式小结

大家好,又见面了,我是全栈君。

来源:http://www.ido321.com/930.html

ps:是获取样式。不是设置样式。若没有给元素设置样式值。则返回浏览器给予的默认值。(论坛整理)

 

1、element.style:仅仅能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>载入进来的样式属性

   1: var ele = document.getElementById('ele');
   2: ele.style.color;    //获取颜色

 

2、window.getComputedStyle():能够获取当前元素全部终于使用的CSS属性值

   1: window.getComputedStyle("元素", "伪类");

这种方法接受两个參数:要取得计算样式的元素和一个伪元素字符串(比如“:before”) 。

假设不须要伪元素信息,第二个參数能够是null。

也能够通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

   1: var ele = document.getElementById('ele');
   2: var styles = window.getComputedStyle(ele,null);
   3: styles.color;  //获取颜色

能够通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,须要使用后面的方法。对于Firefox和Safari。会把颜色转换成rgb格式。

 

3、element.currentStyle:IE 专用。返回的是元素当前应用的终于CSS属性值(包含外链CSS文件,页面中嵌入的<style>属性等)。

   1: var ele = document.getElementById('ele');
   2: var styles = ele.currentStyle;
   3: styles.color;

注意:对于综合属性border等。ie返回undefined,其它浏览器有的返回值。有的不返回。可是borderLeftWidth这种属性是返回值的

 

4、getPropertyValue():获取CSS样式的直接属性名称

   1: var ele = document.getElementById('ele');
   2: window.getComputedStyle(ele,null).getPropertyValue('color');

注意:属性名不支持驼峰格式。IE6-8不支持该方法。须要使用以下的方法

 

5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式

   1: var test = document.getElementById('test');
   2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

  注意:该方法仅仅支持IE6-8。

 

以下的获取样式方法兼容IE、chrome、FireFox等

   1: function getStyle(ele) {
   2:     var style = null;
   3:     
   4:     if(window.getComputedStyle) {
   5:         style = window.getComputedStyle(ele, null);
   6:     }else{
   7:         style = ele.currentStyle;
   8:     }
   9:     
  10:     return style;
  11: }

在JQuery中,经常使用css()获取样式属性。其底层运作就应用了getComputedStyle以及getPropertyValue方法。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115275.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Eclipse_配置_00_资源帖

    Eclipse_配置_00_资源帖

  • qt录制屏幕_iphone录屏转gif

    qt录制屏幕_iphone录屏转gif一、说明:不断地截取选中的区域,然后将其制作成gif动图。二、效果图:1、可设置要录制屏幕的宽高,支持右下角直接拉动改变.2、可设置变宽的宽度3、可设置录屏控件的背景颜色4、可设置录制的帧数5、录制区域可自由拖动选择三、代码:1、main.cpp#pragmaexecution_character_set(“utf-8”)#include”gifwidget.h”#include<QApplication>#include<QTe

  • 基于Deep Learning 的视频识别技术「建议收藏」

    基于Deep Learning 的视频识别技术「建议收藏」深度学习在最近十来年特别火,几乎是带动AI浪潮的最大贡献者。互联网视频在最近几年也特别火,短视频、视频直播等各种新型UGC模式牢牢抓住了用户的消费心里,成为互联网吸金的又一利器。当这两个火碰在一起,会产生什么样的化学反应呢?不说具体的技术,先上一张福利图,该图展示了机器对一个视频的认知效果。其总红色的字表示objects,蓝色的字表示scen…

  • 从零开始到设计Python+Selenium自动化测试框架-如何开始

    从零开始到设计Python+Selenium自动化测试框架-如何开始如何开始学习webui自动化测试?如何选择一门脚本语言?选择什么自动化测试工具?    本人已经做测试快5年,很惭愧,感觉积累不够,很多测试都不会,三年多功能测试,最近两年才开始接触和学习自动化测试。打算写一个系列文章,关于如何从零开始到会设计和组装一个简单的webui自动化测试框架。把文章放到这里的目的,方便以后自己记不住,回过来看看,还有就是给一些想学习web自动化测试的朋友们一

  • c和Java的区别[通俗易懂]

    c和Java的区别[通俗易懂] 转 c和Java的区别 2017年12月24日20:45:32 lzr_jead 阅读数:166 Java和C语言的区别在哪里?设…

  • java有哪些服务器_java服务器有哪些?

    java有哪些服务器_java服务器有哪些?java服务器有哪些?应用服务器主要为应用程序提供运行环境,为组件提供服务。Java的应用服务器很多,从功能上分为两大类,JSP服务器和JavaEE服务器,也可分其他小类。JSP服务器有Tomcat、BejyTiger、Geronimo、Jetty、Jonas、Jrun、Orion、Resin等等。JavaEE服务器有TongWeb、BESApplicati…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号