通过js读取元素的样式
/*
* 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值
* 所以如果要获取除内联样式后的值,就不能通过这个获取
* alert(box1.style.height)
* 还有其他的形式,比如获取元素当前显示的样式,就是不管是外联还是嵌入式还是内联,谁显示就是获取谁的样式
* 语法:元素.currentStyle.样式名
* 他可以读取当前元素正在显示的样式
* alert(box1.currentStyle.width);
* 这个只有IE支持,其他浏览器都不支持。
* 在其他浏览器中可以使用getComputedStyle()这个方法来获取当前元素的样式
* 这个是window的方法,可以直接使用
* 语法:
* 需要两个参数:
* 第一个:要获取样式的元素
* 第二个:可以传递一个伪元素,一般都传null。
* 该方法会返回一个对象,对象中封装了当前元素对应的样式
* 可以通过对象.样式名来读取样式
* 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
* 比如没有设置width,他不会获得auto,而是一个实际上的值。
* 而IE的话,不设置会默认auto
* 但是该方法不支持IE8及以下浏览器
* 如果为了兼容两个,那么就定义一个函数来兼容两个都可以,就是类似弄一个判断包含在里面
*
* 通过currentStyle和getComputedStyle()读取到的样式都是只读的
* 不能修改,如果要修改必须通过style属性。
*/
function getStyle(obj,name){
//获取属性可以通过.,也可以通过中括号,这里.不适合,中括号才适合
//正常浏览器的方式,具有getComputedStyle方法
getComputedStyle(obj,null)[name]
//要加window,否则是个变量,到时候会报错
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}else{
//IE浏览器,具有currentStyle方法
return obj.currentStyle[name]
}
//第二种方式可以通过三元运算符
window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
}
通过js读取元素的样式的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- js实现元素添加样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js给元素添加样式[addClass][hasClass]
function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...
- 通过JS动态的修改HTML元素的样式和增添标签元素等
一. 通过JS动态的修改HTML元素的样式 1. 要想在js中动态的修改HTML元素的样式,首先需要写document, document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- (知识点)JS中获取元素的样式
首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...
随机推荐
- hexo博客更换主题
前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...
- wav2midi 音乐旋律提取算法 附可执行demo
前面提及过,音频指纹算法的思路. 也梳理开源了两个比较经典的算法. https://github.com/cpuimage/shazam https://github.com/cpuimage/Aud ...
- 20155207 《Java程序设计》实验报告二:Java面向对象程序设计
实验要求 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验内容 一.单元测试 1.三种代码 ...
- 随笔三 安装Linux操作系统
一.虚拟机安装Ubuntu图文教程]在自己笔记本上安装Linux操作系统 我参考了VirtualBox虚拟机安装Ubuntu的图文教程,根据图片和所附内容一步步的将虚拟机安装到位,没看安装教程之前完全 ...
- 客户端与服务器端同步Evernote
原文地址:http://www.zhihu.com/question/20238731 Evernote的同步方式是 以本地为基准同步到网络 还是 以网络为基准同步到本地 的? 若客户端从未与服务器端 ...
- PhoneGap3.2安装步骤
1.首选安装好JDK.Android SDK.Ant 配置如下: 系统环境变量 ANDROID_HOME Value: C:\Development\adt-bundle\ ...
- 【CF543E】Listening to Music
[CF543E]Listening to Music 题面 洛谷 题目大意 给你一个长度为\(n\)序列\(a_i\),和一个常数\(m\),定义一个函数\(f(l,x)\)为\([l,l+m-1]\ ...
- Azkaban 工作流调度器
Azkaban 工作流调度器 1 概述 1.1 为什么需要工作流调度系统 a)一个完整的数据分析系统通常都是由大量任务单元组成,shell脚本程序,java程序,mapreduce程序.hive脚本等 ...
- 英特尔近日发布最新版实感™ SDK R5 (v7)
英特尔开发人员专区 原文地址 英特尔® 实感™ SDK 的 7.0.23.8048 版本(也称为 R5)现已推出.您将看到的主要变化包括: 支持英特尔® 实感™ SR300 摄像头:应于 2016 年 ...
- 4星|《财经》2018年第13期:年轻人大多从大三和大四起开始就从QQ向微信转移
<财经>2018年第13期 总第530期 旬刊 本期主要话题是快递业,其他我感兴趣的重要话题还有:香港9价HPV疫苗断供风波:华盛顿邮报被贝佐斯收购后这几年的变化:北京二中朝阳学校的划片风 ...