分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

通过js读取元素的样式

发布时间:2023-09-06 02:05责任编辑:彭小芳关键词: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读取元素的样式

原文地址:https://www.cnblogs.com/caicaihong/p/9341457.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved