`
cuckoosnest
  • 浏览: 103481 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript取得元素style值的方法

阅读更多
因为写js经常需要用到访问样式,我们常用的做法是通过 DOM.style.XXX来读写样式信息的。可是DOM.style这种写法只能访问,这样在标签里内置的样式,如果样式写在,或者.css文件里,那么就办法读到样式了。

其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过“最终样式”对象。其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。

我采用的代码(没有YUI的精确,但基本够用)

 getComputedStyle: function(elm, styleName) {
  elm = Y.$(elm);
  if( window.getComputedStyle ) {
   return elm.ownerDocument.defaultView.getComputedStyle(elm, null)[styleName]; // window.getComputedStyle(elm, null)[styleName];
  } else if( elm.currentStyle ) {
   return elm.currentStyle[styleName];
  }  
 }
分享到:
评论

相关推荐

    javascript通过元素id和name直接取得元素的方法

    JavaScript中获取页面元素的...而通过name获取元素的方法适用于特定类型的元素,并且能够处理具有相同name属性值的多个元素。掌握这两种方法,对于任何使用JavaScript进行网页开发的开发者来说,都是必不可少的技能。

    JavaScript

    例如,使用`document.getElementById()`、`document.createElement()`、`element.style.property`等方法可以实现这些功能。 JavaScript教材和教程通常会覆盖基础语法、高级特性、前端框架(如React、Vue、Angular)...

    javascript 获取图像信息

    `img.style`用于设置或返回`<img>`元素的样式属性。在此示例中,为了不影响页面布局,将新创建的图像元素隐藏起来。 ```javascript img.style.position = "absolute"; img.style.visibility = "hidden"; ``` #### 3...

    javascript

    CSS操作也是JavaScript的重要应用领域,通过修改元素的样式属性,可以实现动态效果。例如,当鼠标悬停在某个元素上时,改变背景颜色: ```javascript element.addEventListener("mouseover", function() { element...

    JavaScript 经典代码大全

    12. 取得控件的绝对位置:通过JavaScript或VBScript可以获取页面上某个元素相对于文档顶部和左边的偏移值,这对于定位和布局非常有用。 13. 光标自动定位到文本框末尾:`onfocus="cc()"`事件绑定的函数`cc()`会确保...

    取得多个下拉框的值

    - `document.getElementsByName("name1")`:这个方法返回一个NodeList对象,它包含了所有具有`name1`名称的元素。注意这里返回的是一个类似数组的对象,而不是真正的数组。 2. **循环遍历**: - 使用`for`循环...

    js取得DIV的top,left,width,height值.doc

    总的来说,获取JavaScript中DOM元素的`top`, `left`, `width`, `height`值涉及多个方法和属性,具体使用哪种取决于你的需求,如精确的视口位置、CSS样式或相对于父元素的位置等。同时,浏览器信息的检测也是Web开发...

    JavaScript常用初学者帮助大全

    在JavaScript中,你可以使用`document.getElementById()`,`document.querySelector()`或`document.querySelectorAll()`等方法找到特定的HTML元素。然后,可以更改元素的属性,如`element.innerHTML`或`element....

    Javascript获取CSS伪元素属性的实现代码

    总的来说,通过理解CSS伪元素的概念,结合JavaScript的 `getComputedStyle` 方法及其兼容性处理,开发者可以有效地获取到CSS伪元素的属性值,这在处理复杂的页面样式动态调整时是非常有用的。不过,需要注意的是,...

    jQuery取得iframe中元素的常用方法详解

    这段代码首先通过document.frames方法获取名为iframename的iframe对象,然后通过document属性访问其内部的document对象,最后使用jQuery选择器取得ID为objid的元素。 在jQuery 1.9版本之后,也可以使用contents()...

    网页设计与开发——html css javascript ppt幻灯片

    网页设计与开发是数字时代的重要技能之一,涵盖了HTML、CSS和JavaScript这三种核心技术。这些技术共同构成了网页的基础架构,...学习和熟练掌握HTML、CSS和JavaScript,对于想要在这个领域取得成功的人来说至关重要。

    Coursera课程:面向Web开发人员的HTML、CSS和Javascript,模块3作业仅供学习参考用代码.zip

    4. 表单元素:掌握创建表单的方法,包括输入框、按钮、复选框和单选按钮等。 **CSS (Cascading Style Sheets)** CSS是用于控制网页外观和布局的样式语言。在这个模块中,你将学习: 1. 选择器:了解ID选择器、类...

    javascript自定义的addClass()方法

    在原生JavaScript中,并没有内置的addClass()方法,这个方法通常在jQuery库中出现,用于向选定的元素添加一个或多个类。然而,在没有引入jQuery的项目中,我们可以通过编写自定义的JavaScript函数来实现类似的功能。...

    javascript学习

    在本篇文章中,我们将深入探讨与“javascript学习”这一主题相关的关键知识点,这些知识点主要源自提供的标题、描述、标签及部分内容。...希望这份详尽的知识点总结能帮助你在JavaScript的学习旅程中取得更大的进步!

    用javascript写的抽奖网页

    JavaScript的`Math.random()`函数可以生成0到1之间的随机数,通过适当的方法可以转换为指定范围内的整数。 3. **DOM操作(Document Object Model Manipulation)**:修改HTML元素以显示抽奖结果。例如,可以改变中奖...

    javascript16

    此外,JavaScript16还可能涵盖与Web开发密切相关的技术,如DOM操作(添加、删除、查找元素)、AJAX(异步JavaScript和XML,现在更多地使用fetch API)用于实现页面的无刷新更新,以及事件处理,使用户与网页的交互...

    jquery和HTML css javascript.rar

    例如,使用jQuery,一行代码`$("#myElement").hide()`即可隐藏ID为“myElement”的元素,而无需编写复杂的JavaScript代码。jQuery还提供了丰富的插件和API,使开发者能够快速构建功能丰富的Web应用。 在“jquery和...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     11.3.2 通过Flickr取得个性头像   11.4 小结   第12章 案例研究:用DOM设计选择列表   12.1 经典的感觉   12.2 构建更好的选择列表   12.3 策略?我们不需要臭哄哄的策略   12.3.1 相关的文件...

    HTML+CSS+JavaScript

    HTML文档由一系列的元素组成,这些元素通过标签来表示,如`<html>`、`<head>`、`<body>`等。...无论是初学者还是有经验的开发者,这些资料都将为你提供宝贵的学习资源和参考指南,助你在前端开发领域取得更大的进步。

Global site tag (gtag.js) - Google Analytics