JS之获取样式的简单实现方法(推荐)

基本代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      color:yellow;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

1.通过使用element.style属性来获取

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

element.style属性只能获取行内样式,不能获取<style>标签中的样式,也不能获取外部样式

由于element.style是元素的属性,我们可以对属性重新赋值来改写元素的显示。

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style['background-color'] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

2.通过getComputedStyle和currentStyle来获取样式

getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11

<script>
  var div = document.getElementsByTagName("div")[0];
  var styleObj = window.getComputedStyle(div,null);
  console.log(styleObj.backgroundColor); //red
  console.log(styleObj.color); //yellow
</script>

currentStyle在IE里能得到完美支持,chrome不支持,ff不支持

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = div.currentStyle;
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
  </script>

3.ele.style和getComputedStyle或者currentStyle的区别

3.1 ele.style是读写的,而getComputedStyle和currentStyle是只读的

3.2 ele.style只能得到行内style属性里面设置的CSS样式,而getComputedStyle和currentStyle还能得到其他的默认值

3.3 ele.style得到的是style属性里的样式,不一定是最终样式,而其他两个得到的是元素的最终CSS样式

4.获取样式兼容性写法

<script>
    //获取非行间样式(style标签里的样式或者link css文件里的样式),obj是元素,attr是样式名
    function getStyle(obj,attr){
       //针对IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函数传过来的attr是字符串,所以得用[]来取值
       }else{
         //针对非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    /*
       获取或者设置css属性

    */
    function css(obj,attr,value){
       if(arguments.length == 2){
         return getStyle(obj,attr);
       }else{
         obj.style[attr] = value;
       }
    }
  </script>

5.window.getComputedStyle(ele[,pseudoElt]);

第二个参数如果是null或者省略,则获取得到是ele的CSSStyleDeclaration对象

如果是一个伪类,则获取到的是伪类的CSSStyleDeclaration对象

<style>
div{
  width:200px;
  height:200px;
  background-color:#FC9;
  font-size:20px;
  text-align:center;
}
div:after{
  content:"This is after";
  display:block;
  width:100px;
  height:100px;
  background-color:#F93;
  margin:0 auto;
  line-height:50px;

}
</style>

<body>
  <div id='myDiv'>
    This is div
  </div>
  <input id='btn' type="button" value='getStyle'/>
  <script>
    var btn = document.querySelector('#btn');
    btn.onclick = function(){
      var div = document.querySelector('#myDiv');
      var styleObj = window.getComputedStyle(div,'after');
      console.log(styleObj['width']);
    }
  </script>
</body>

 6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.getPropertyValue("background-color"));
</script>

getPropertyValue(propertyName);中的propertyName不能是驼峰式表示

obj.currentStyle['margin-left'] 有效

obj.currentStyle['marginLeft']  有效

window.getComputedStyle(obj,null)['margin-left']  有效

window.getComputedStyle(obj,null)['marginLeft']  有效

window.getComputedStyle(obj,null).getPropertyValue('margin-left')  有效

window.getComputedStyle(obj,null).getPropertyValue('marginLeft')   无效

obj.currentStyle.width   有效

obj.currentStyle.background-color 无效

obj.currentStyle.backgroundColor  有效

window.getComputedStyle(obj,null).width  有效

window.getComputedStyle(obj,null).background-color  无效

window.getComputedStyle(obj,null).backgroundColor 有效

综上,就是带有"-"的属性不能直接点出来,所以有getPropertyValue方法来处理,但是可以用[]来取代getPropertyValue

7.defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView,  那是在firefox3.6上访问子框架内的样式 (iframe)

以上这篇JS之获取样式的简单实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • 解析js如何获取css样式

    一.获取内联样式 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> <script> var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(m

  • JS之获取样式的简单实现方法(推荐)

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • js获取元素的外链样式的简单实现方法

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

  • js中获取URL参数的共用方法getRequest()方法实例详解

    下面通过一段代码给大家介绍js中获取URL参数的共用方法getRequest()方法,具体代码如下所示: getRequest : function() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&am

  • js遍历获取表格内数据的方法(必看)

    本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr

  • jQuery获取样式中颜色值的方法

    本文实例讲述了jQuery获取样式中颜色值的方法.分享给大家供大家参考.具体分析如下: 今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,0,0)],由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码: $.fn

  • js 判断附件后缀的简单实现方法

    实例如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 判断附件后缀的简单实现方法</title> <script type="text/javascript"> //3.(字符)检查文件上传表单控件,如果含有[jpg,jpeg,g

  • JS实现获取自定义属性data值的方法示例

    本文实例讲述了JS实现获取自定义属性data值的方法.分享给大家供大家参考,具体如下: HTML部分: <div id="tree" data-leaves="47" data-plant-height="2.4m"></div> js部分: var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log(tree

  • JS自定义对象创建与简单使用方法示例

    本文实例讲述了JS自定义对象创建与简单使用方法.分享给大家供大家参考,具体如下: <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> //创建自定义对象 //方法一: // var obj=new Object(); //方法二 var obj={}; obj.n

  • SpringBoot获取配置文件的简单实现方法

    前言 在讲SpringBoot 获取配置文件之前我们需要对SpringBoot 的项目有一个整体的了解,如何创建SpringBoot 项目,项目结构等等知识点,我在这里就不一一讲述了,没有学过的小伙伴可以自己在网上找一些资料进行学习,很简单的. 下面让我们开始今天的内容讲解吧. 一.SpringBoot 全局配置文件的加载顺序 在SpringBoot 当中,全局配置文件有两种不同的格式,一个是我们常见的properties, 一种是yml. 这两种格式的文件其实也没什么太大的区别,使用的时候按照

随机推荐