还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!!

需求

简单就是获取一个css的height

(好吧 就是一个这么简单的需求)

实践

好吧 长时间的JQ 我已经对原生无能了 让我默哀3秒!!!

document.querySelector('.className').style.height;

这个果然不生效 好吧 看来我真的倒退不少!让我再哭一会!!(哭你妹 快去总结)

在学习中发现 其实js原生获取css的方法很多,上面写的就是其中一种,只不过情景不对啊!

getComputedStyle

  • 说明 一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])

简单来说 读出你八辈祖宗的一个方法。

  • 语法 window.getComputedStyle(dom, '伪元素')

看到伪元素、我就懵逼了 我只知道伪类啊 这有神马区别?

伪元素 其实就是 ::before :: after :: first-line ::first-letter ::content 等等
伪类 :hover :link :first-child :active 等等

  • 用法
var oImg = document.getElementById('photo');

window.getComputedStyle(oImg, null).height;

dom.style

  • 说明 获取元素style属性中的CSS样式, 简单说就是 能读能写 只能读你的外表

  • 语法 dom.style.样式名称

  • 用法

var oImg = document.getElementById('photo');

oImg.style.height;  // 只能获取css 样式表的

currentStyle

  • 说明 返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)与getComputedStyle那个读你八辈祖宗的很像,但是不能获取伪元素。且他们获取的属性也有很大差异。

  • 语法 element.currentStyle.样式

  • 用法

var oImg = document.getElementById('photo');

oImg.currentStyle.height;  // 只能获取css 样式表的

getPropertyValue和getAttribute

  • 说明 可以获取CSS样式申明对象上的属性值(直接属性名称),
    getPropertyValue可以不用驼峰,直接用其属性名
    getAttribute主要是为了兼容IE获取属性值,需要驼峰的写法

  • 语法
    getPropertyValue("background-color")
    getAttribute("backgroundColor")

  • 用法

var oImg = document.getElementById('photo');
var oStyle = oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null);
oStyle.getPropertyValue("background-color")
oStyle.getAttribute("backgroundColor")

总结

如果我想获取某个属性值可以 比如高度 ?
(dom.currentStyle? dom.currentStyle : window.getComputedStyle(dom, null)).height;

如果是复合的某个属性获取?
(oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null)).getPropertyValue("background-color")

如果我想给这个属性重新设置这个高度?
可以先用上面方法取到,然后用
dom.style.height = XX + 'px';
如果是复合的属性值,请注意是驼峰的写法!

其实在看了这些以后,我用了上面的这个方法我依然没有获取到这个图片的高度?为什么啊 ?

因为图片存在一个加载的问题,你刚进来获取当然无法获取到? 其实可以用onload事件来解决,具体还有其他更多的方法。

为什么我获取不到这个css样式?js原生获取css样式总结的更多相关文章

  1. js原生获取className&amp;多选一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  3. js原生获取css属性

    原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...

  4. html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  5. 封装一个通过class获取元素的方法--我的JS原生库(1)

    function getByClass(oParent,sClass){ var aEle = oParent.getElementsByTagName('*'); var result = []; ...

  6. js 原生获取Class元素

    function getElementsByClassName(n) { var classElements = [] allElements = document.getElementsByTagN ...

  7. 解决修改css或js文件后,浏览器缓存未更新问题

    问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...

  8. 运用 CSS in JS 实现模块化

    一.什么是 CSS in JS 上图来源:https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种设计模式,它的核心思想是把 CS ...

  9. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

随机推荐

  1. NDK学习一: 环境搭建Eclipse篇

    下载NDK 国内的一个镜像站点 下载速度比较快 http://wear.techbrood.com/tools/sdk/ndk/#Installing 网上搭建环境的方案有很多 1. Eclipse ...

  2. Swift3.0语言教程使用占位符格式创建和初始化字符串

    Swift3.0语言教程使用占位符格式创建和初始化字符串 Swift3.0语言教程使用占位符格式创建和初始化字符串在很多的编程语言中都存在占位符,占位符就是为指定的内容占留一个位置.此功能一般在开发者 ...

  3. Entity Framework问题总结

    Entity Framework WITH(NOLOCK) EF本身不支持WITH(NOLOCK), 都指出建议设置事务的级别为允许脏读. IsolationLevel = IsolationLeve ...

  4. 我的Android进阶之旅------&gt;Android安全退出应用程序的几种方式

    当应用不再使用时,通常需要关闭应用,可以使用以下几种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程.  建议使用这种方式 android.os.Process.kil ...

  5. 蓝桥杯-猜年龄-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. 剑指Offer--图的操作

    剑指Offer–图的操作 前言   企业笔试过程中会涉及到数据结构的方方面面,现将有关图的深度优先搜索与广度优先搜索进行整理归纳,方便日后查阅.   在已做过的笔试题目中,可用DFS解决的题目有: & ...

  7. 提高组noip2015

    一道二分答案裸题,一道dp,一道各种裸题的混合(树上差分+二分答案+LCA) stone: 二分查找裸题啊: int check(int x) { ,last=; ;i<=n;i++) if(a ...

  8. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  9. godep 包管理

    go get -u -v github.com/tools/godep  godep save

  10. java基础知识疑难点

    1.“static”关键字是什么意思?Java中是否可以覆盖(override)一个private或者是static的方法? “static”关键字表明一个成员变量或者是成员方法可以在没有所属的类的实 ...