微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

javaScript 读取和设置文档元素的样式属性_javascript技巧

php中文网
发布： 2016-05-16 18:54:22
原创
1323人浏览过

首先我们先说一下样式表属性
1. 内联样式即元素style属性里面设置的，级别最高
2. 页面样式表定义即页面里面定义的，级别次之
3.外部链接样式表文件
JavaScript获取和设置文档元素的css属性：
1.获取元素Style属性里面设置的样式属性，
document.getElementById(id).style.height;
有，则返回属性值；没有则返回空
IE和火狐皆然，只是有的属性值返回可能不一样，比如像颜色火狐返回rgb，而IE是返回十六进制数字
测试代码：


asdfasdfas


2.有时候我们的样式可能有多个地方设置了，我们也不知道它到底是外部样式表属性起作品，还是在内联样式里面起作用，所以我们就需要获取当前页面渲染的属性值。这个在IE和FF里面有些不同：
示例代码片断：
IE：document.getElementById('aaa').currentStyle.height
FF标准：document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')
这两个属性是只读的，若要改变元素样式还得使用style，它直接写在元素style属性里面级别最高起作用
3.写一个兼容IE和FF的函数来调用
复制代码 代码如下:

function getRealStyle(id,styleName) {
var element = document.getElementById(id);
var realStyle = null;
if (element.currentStyle)
realStyle = element.currentStyle[styleName];
else if (window.getComputedStyle)
realStyle = window.getComputedStyle(element,null)[styleName];
return realStyle;
}

调用：cur_height = parseInt(getRealStyle(CON_ID,'height'));
P.S:返回值通常会带有单位，需要使用parseInt函数提取数字，以方便后面的操作
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js cookies 常见网页木马挂马代码 24小时只加载一次_广告代码 下一篇：JavaScript获取GridView选择的行内容_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
使用XPath和document.evaluate按文本内容选择DOM元素 本文详细介绍了如何利用JavaScript的document.evaluate方法结合XPath表达式，高效地根据DOM元素的文本内容进行精确查找。这种方法避免了传统querySelectorAll后手动遍历的性能开销，尤其适用于需要复杂条件筛选或特定位置元素的场景，提升了DOM操作的灵活性和效率。
2025-11-20 13:26:19
411
React Query中实现顺序POST请求与结果聚合 本教程详细阐述了如何在React应用中，利用ReactQuery和Array.prototype.reduce实现一系列顺序执行的POST请求。它涵盖了等待每个请求完成（无论成功与否）、收集所有独立响应数据，并最终将这些聚合后的数据发送给服务器的完整流程。文章将通过代码示例和详细解释，展示如何构建一个健壮的异步操作链。
2025-11-20 13:13:01
510
JavaScript构建优化_打包体积分析 使用WebpackBundleAnalyzer等工具分析打包体积，定位重复引入、未启用TreeShaking等问题，通过代码分割、压缩混淆、CDN分离和依赖清理等手段优化，持续监控防止体积失控。
2025-11-20 12:47:02
619
计算排除最大最小值的平均值：JavaScript数组操作实践 本文详细介绍了如何在JavaScript中计算一个数字数组的平均值，同时排除数组中的最大值和最小值。核心方法包括使用数组的排序功能快速定位极值，接着利用切片操作移除这些极值，最后通过归约方法计算剩余元素的总和并得出平均值。文章强调了数值排序的关键细节，并提供了完整的代码示例和注意事项。
2025-11-20 12:38:03
498
解决React中useParams与数据查找导致的undefined解构错误 本文旨在解决React应用中，使用useParams获取路由参数后，通过Array.prototype.find查找数据时可能遇到的Cannotdestructureproperty‘X’of‘Y’asitisundefined错误。核心内容包括识别路由参数类型不匹配和find方法返回undefined这两个主要原因，并提供类型安全比较、使用空对象解构默认值、条件渲染以及可选链操作符等多种健壮的数据处理方案，确保组件在数据缺失时也能稳定运行。
2025-11-20 12:37:36
793
Day.js isLeapYear 方法未定义错误的解决方案与插件加载指南 本文旨在解决Day.js用户在使用isLeapYear等插件时遇到的"isLeapYearisnotafunction"错误。该问题通常源于在浏览器环境中未能正确加载和扩展Day.js插件。我们将详细阐述通过CDN方式引入插件的正确步骤，强调通过window对象访问插件并使用dayjs.extend()方法进行注册，确保Day.js核心功能能顺利集成扩展功能。
2025-11-20 12:37:02
804
JS性能优化：内存泄漏检测与解决方案 JavaScript内存泄漏常见于全局变量、闭包、事件监听、定时器和DOM引用未清理，可通过ChromeDevTools分析堆快照与内存分配时间线定位；解决方法包括解绑事件、清除定时器、置空DOM引用、使用WeakMap及严格模式，结合ESLint与自动化测试可有效预防。
2025-11-20 12:16:02
488
JavaScript浏览器API_DOM操作与事件委托机制 DOM操作通过API修改网页结构，事件委托利用冒泡机制在父元素处理子元素事件。1.使用getElementById、querySelector等方法获取并操作元素；2.事件监听绑定在冒泡阶段，e.target指向实际触发元素；3.事件委托将监听器绑定到父级，动态添加的子元素无需重新绑定；4.优点包括减少内存占用、支持动态内容、简化维护；5.推荐使用e.target.matches()精准判断目标元素，必要时调用preventDefault或stopPropagation。结合二者可提升性能与代码
2025-11-20 11:58:02
876
JavaScript中的原型链继承与Class语法糖 JavaScript继承基于原型链，ES6的class是其语法糖。通过Object.create()建立原型链，实现方法共享；class中extends本质仍是设置原型指向。例如，StudentextendsPerson使子类继承父类属性方法，super()调用父构造函数。class语法更清晰、易维护，推荐现代项目使用，但需注意：方法在原型上、必须用new调用、无变量提升、私有字段用#定义。尽管class写法直观，底层仍依赖原型链，理解二者关系有助于掌握JS对象模型，结合使用更高效。
2025-11-20 11:55:31
810
使用jQuery或JavaScript高效检测DOM祖先元素类名 本文详细讲解了如何在JavaScript和jQuery中，高效地判断一个特定祖先元素是否包含某个CSS类名。重点介绍了jQuery的closest()和hasClass()方法的组合使用，并区分了jQuery对象与原生DOM元素的API差异，同时提供原生JavaScript的实现方式，帮助开发者准确实现DOM结构中的类名检测。
2025-11-20 11:52:02
970
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部